对话框内的 Bootbox 对话框

Question

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

编辑

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

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

Answer 1

来自Bootstrap docs（Bootbox 所基于）：

不支持多个打开模式。

没有什么可以阻止您打开多个模式，但 CSS 并未设置为处理超过一层的叠加层。为了实现这一点，您需要调整（至少）新叠加层的 z-index 值，这可能还需要与第二个模态的 z-index 相当的凹凸。

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

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”。我选择忽略了一些警告；例如，如果第一个模态框允许通过单击背景来关闭模态框，则您可以关闭第一个模态而不关闭第二个。

init() 函数可能是附加 'push-back' 类（或等效类）的最佳位置，但如果您能找到适合您的解决方案，请使用它。

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