对话框内的引导箱对话框

我最近被分配到一个使用 bootbox 的项目，我当前的问题之一是在打开一个对话框后打开另一个对话框。问题是打开第二个对话框后背景阴影不会覆盖第一个对话框。 有没有办法打开第二个对话框覆盖第一个对话框？

EDIT

function Confirm(question, callBack) {
    bootbox.confirm(question, callBack);
}

如果执行两次，它将显示两个弹出窗口，但第一个不会被阴影覆盖。

来自引导文档 http://getbootstrap.com/javascript/#modals（Bootbox 基于哪个）：

不支持多个开放模式。

没有什么可以阻止您打开多个模式，但 CSS 无法设置为处理多于一层的叠加层。为了实现这一点，您需要调整（至少）新叠加层的 z-index 值，这可能还需要与第二个模态的 z-index 进行类似的调整。

您也可以将原始模态的 z-index 调整为略小于叠加层。事实上，这是一个演示这种行为的示例：

https://jsfiddle.net/Lu1wp3nn/ https://jsfiddle.net/Lu1wp3nn/

CSS:

.push-back {
    z-index: 100;
}

JavaScript：

$(function () {
    var dialog1 = bootbox.alert({
        message: "I'm the first!"
    });

    setTimeout(function () {
        var dialog2 = bootbox.alert({
            message: "I'm the second",
            size: 'small',
            backdrop: false
        }).init(function () {

            dialog1.addClass('push-back');

        }).on('hidden.bs.modal', function (e) {

            dialog1.removeClass('push-back');

        });
    }, 3000);

});

setTimeout 只是为了让您看到第一个示例对话框。 3 秒后，将加载第二个对话框，您将看到第一个对话框移动到覆盖层下方。

为了避免较暗的覆盖层，此示例还使用“backdrop: false”省略了它自己的覆盖层。有一些警告我选择忽略；例如，如果第一个模态允许通过单击背景来关闭模态，则您可以关闭第一个模态而不关闭第二个模态。

The init()function 可能是附加“推回”类（或等效类）的最佳位置，但如果您能找到适合您的解决方案，请使用它。

唯一需要注意的另一件事是，当第二个模态关闭时，您需要删除“推回”类，否则您将无法与第一个模态交互。