如何在 Twitter Bootstrap 中同时打开两个模态对话框 [英] How to open two modal dialogs in Twitter Bootstrap at the same time

问题描述

我已经在我的项目中实现了引导对话框.我在该对话框中有一些删除功能，删除确认消息会打开另一个引导程序对话框.但是当第二个确认对话框打开时，第一个对话框没有被禁用，所有事件都有效.

有没有办法在打开另一个对话框时禁用原始对话框?

这是我的代码:

function OpenDialogForSelectionAdmItem(title, content, callback) {var dlg = 新的 BootstrapDialog({标题:标题，内容:内容，纽扣: [{标签:'保存'，cssClass: 'btn-primary',id: 'btnSave',onclick:功能(对话框){}},{标签:'关闭'，cssClass: 'btn',id: 'btnClose',onclick:功能(对话框){如果(回调！="){回调(真)；}dialog.close();}}]});dlg.open();`}

截图:

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

解决方案

问题:

为了理解 Web 开发中模态对话框的复杂性，您需要更多地了解

---

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

无限对话小提琴

---

用户体验警告:

虽然这在技术上是可以实现的，模态中的模态可能会造成令人困惑的用户体验，所以正确的答案是如果您遇到问题，您可能会尝试通过采用原始工作流程并将其提升为带有 url 和状态的完整页面设计来完全避免它.

I have implemented bootstrap dialog in my project. I have some delete functionality in that dialog, and the delete confirmation message opens another bootstrap dialog. But when the second confirmation dialog is open, the first dialog is not disabled and all the events work.

Is there any solution to disable the original dialog when another dialog opens?

Here's my code:

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();`
}

Screenshot:

When the dialog for delete confirmation is open, I want to disable the first dialog.

解决方案

The Problem:

In order to understand the intricacies of modal dialogs in web development, you'll need to understand a bit more about the z-index property and stacking contexts.

In short, the dialog works by adding two principal components to the DOM: a background that takes up the entire screen, and a div comprising your dialog. Each of those stand out from the rest of the page because they are put at the the root level of the DOM and given a high value for their z-index property. How high? Well, try adding a blank modal to a blank page and you'll see the following DOM elements:

<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,
        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);
        } 
        // More Settings
    }).open();
}

Working Demo in jsFiddle

Screenshot:

---

As a proof of concept, here's a Demo that allows you to continually add dialogs on top of other dialogs

Infinite Dialogs Fiddle

---

UX Caution:

While this is technically possible to achieve, modals within modals can create a confusing UX, so the right answer if you have the problem might be to try to avoid it altogether by taking the original workflow and promoting it to a full page design with a url and state.

这篇关于如何在 Twitter Bootstrap 中同时打开两个模态对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！