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'类（或等效类）的最佳位置，但是如果你能找到一个适合你的解决方案，请运行它。

唯一需要注意的是，当第二个模态关闭时，你想要删除'push-back'类，否则你将无法与第一个模态进行交互。

对话框内的Bootbox对话框

1 个答案:

CSS：

使用Javascript：