Bootbox对话框 [英] Bootbox dialog inside dialog

问题描述

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

I was recently assigned to a project using bootbox and one of my current issues is opening another dialog after one is already opened. The problem is that background shadow doesn't cover the first dialog after the second is opened. Is there a way to open the second dialog covering up the first?

EDIT

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

如果执行两次，将显示两个弹出窗口，

If executed twice it will show the two popups, but the first won't be covered in shadow.

推荐答案

从 Bootstrap docs （Bootbox基于）：

From the Bootstrap docs (which Bootbox is based on):

不支持多个打开模式。

Multiple open modals not supported.

没有什么能阻止您打开多个模态，但是CSS不能设置为处理多个图层。为了完成这项工作，你需要调整（至少）新覆盖层的z-index值，这可能需要与第二个模态的z-index进行比较。

There's nothing stopping you from opening multiple modals, but the CSS isn't setup to handle more than one layer of the overlay. To make that work, you'd need to tweak the z-index value of (at least) the new overlay, which would probably also require a comparable bump to the second modal's z-index.

你可能会放弃调整原始模态的z-index稍微小于覆盖。实际上，下面是一个演示行为的示例：

You could possibly get away with tweaking the original modal's z-index to be slightly less than the overlay, as well. In fact, here's an example demonstrating that behavior:

https：/ /jsfiddle.net/Lu1wp3nn/

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

Javascript：

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秒后，加载第二个对话框，您将看到第一个对话框在叠加层下方移动。

setTimeout is there simply to allow you to see the first sample dialog. After 3 seconds, a second dialog loads, and you'll see the first dialog move under the overlay.

为避免更深的叠加，本示例还省略了自己的叠加，使用backdrop：false。有一些注意事项，我选择忽略;例如，如果第一模态允许通过点击背景消除模态，则可以在不解除第二模态的情况下关闭第一模态。

To avoid a darker overlay, this example also omits it's own overlay, using "backdrop: false". There are some caveats to that which I chose to ignore; for instance, if the first modal allows the modal to be dismissed by clicking on the backdrop, you could dismiss the first modal without dismissing the second.

init（）函数可能是附加推回类（或您的等价物）的最佳位置，但如果你能找出一个适合你的解决方案，运行它。

The init() function is probably the best place to attach the 'push-back' class (or your equivalent), but if you can figure out a solution that works for you, run with it.

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

The only other thing to note is that you'd want to remove the 'push-back' class when the second modal is closed, otherwise you won't be able to interact with the first modal.

这篇关于Bootbox对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！