jquery - 对话框内的 Bootbox 对话框

Question

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

编辑

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

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

Answer 1

来自Bootstrap docs (Bootbox 基于哪个):

Multiple open modals not supported.

没有什么可以阻止您打开多个模式，但 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”类(或等效类)的最佳位置，但如果您能找出适合您的解决方案，请运行

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