Bootbox dialog inside dialog

Question

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.

Answer 1

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

Multiple open modals not supported.

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.

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/

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 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.

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.

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.

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.