我在我的项目中实现了 Bootstrap 对话框。我在该对话框中有一些删除功能，删除确认消息会打开另一个 Bootstrap 对话框。但是当第二个确认对话框打开时，第一个对话框不会被禁用并且所有事件都有效。

是否有任何解决方案可以在另一个对话框打开时禁用原始对话框？

这是我的代码:

function OpenDialogForSelectionAdmItem(title, content, callback) {
    var dlg = new BootstrapDialog({
        title: title,
        content: content,
        buttons: [{
            label: 'Save',
            cssClass: 'btn-primary',
            id: 'btnSave',
            onclick: function (dialog) {

            }
        },
        {
            label: 'Close',
            cssClass: 'btn',
            id: 'btnClose',
            onclick: function (dialog) {
                if (callback != "") {
                    callback(true);
                }
                dialog.close();
            }
        }]
    });

    dlg.open();`
}

截图:

当删除确认对话框打开时，我想禁用第一个对话框。

最佳答案

问题:

为了理解网络开发中模式对话框的复杂性，您需要更多地了解 z-index property and stacking contexts .

简而言之，对话框通过向 DOM 添加两个主要组件来工作:占据整个屏幕的背景和包含对话框的 div。它们中的每一个都从页面的其余部分中脱颖而出，因为它们位于 DOM 的根级别，并为其 z-index 属性赋予了高值。 有多高？好吧，尝试将空白模式添加到空白页面，您将看到以下 DOM 元素:

<div class="modal-backdrop fade in"></div>  <!-- z-index: 1030; -->
<div class="modal bootstrap-dialog">        <!-- z-index: 1040; -->
    <div class="modal-dialog">              <!-- z-index: 1050; -->

The modal-backdrop gives the illusion of a true modal process because it renders above all the other content which prevents clicks from firing anywhere below. The only reason the modal-dialog is allowed to receive clicks is because it is stacked on top of the background, by providing a higher z-index.

That's it! That's the whole bag of tricks. So when bootstrap cautions against use multiple dialogs, they're doing so because stacking becomes tricky. If you add another element, it gets rendered with the same exact z-index, meaning that it will be above the regular page content, but on the same plane as the original dialog. If it doesn't completely cover the original, then the original will still be clickable because there is no backdrop above it.

The Solution:

In order to resolve this, you need to come up with your own way of disabling clicks on background modals. This issue appears to have been (partially) resolved. See the following example:

Demo in jsFiddle

Bootstrap Dialog made it so that clicking off of a dialog simply closes the last dialog in the DOM and marks the event as handled so it won't fire anything else. If the second modal is up and you click off of it, the only thing that will happen is the second modal will close.

More Advanced Handling:

If you want the second modal to look like it's over the first one, you'll have to do that manually.

When the new modal is created, it comes with it's own modal-backdrop. When the second modal is shown, you can have it appear above the original by incrementing its z-index relative to the first modal. In the onshown event, we just have to grab the current modal and it's overlay and modify the z-index using the .CSS method. We want this to appear above any existing modals, so first we'll count the number of modals in the DOM ($('.bootstrap-dialog').length) and then increment the z-index so it's higher than the next highest dialog.

Call like this:

function OpenDialogForSelectionAdmItem(title, content, callback) {
    var dlg = new BootstrapDialog({
        title: title,
        message: content,
        <b>onshown: function(dialog) {
            var tier = $('.bootstrap-dialog').length - 1;
            dialog.$modal.prev(".modal-backdrop")
                .css("z-index", 1030 + tier * 30);
            dialog.$modal
                .css("z-index", 1040 + tier * 30);
        }</b> 
        // More Settings
    }).open();
}

Working Demo in jsFiddle

截图:

作为概念证明，这里有一个演示，允许您在其他对话框之上不断添加对话框

Infinite Dialogs Fiddle

用户体验注意事项:

虽然这在技术上是可以实现的，modals within modals can create a confusing UX ，因此如果您遇到问题，正确的答案可能是通过采用原始工作流程并将其提升为具有 url 和状态的完整页面设计来尝试完全避免它。

关于javascript - 如何在 Twitter Bootstrap 中同时打开两个模态对话框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22713085/