Bootbox диалог внутри диалога

Question

Недавно я был назначен в проект с использованием загрузочной коробки, и одна из моих текущих проблем - открытие другого диалога после того, как он уже открыт. Проблема в том, что фоновая тень не закрывает первый диалог после открытия второго. Есть ли способ открыть второй диалог, закрывающий первый?

РЕДАКТИРОВАТЬ

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

Если выполнить дважды, он покажет два всплывающих окна, но первое не будет покрыто тенью.

Answer 1

Из документов Bootstrap (на которых основан Bootbox):

Несколько открытых модалов не поддерживается.

Ничто не мешает вам открывать несколько модалов, но CSS не настроен для обработки более одного слоя наложения. Чтобы это работало, вам нужно настроить значение z-index (по крайней мере) нового наложения, что, вероятно, также потребует сопоставимого увеличения с z-index второго модала.

Вы также можете избежать изменения исходного z-индекса модала, чтобы он был немного меньше, чем оверлей. На самом деле, вот пример, демонстрирующий такое поведение:

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 секунды загрузится второй диалог, и вы увидите, как первый диалог перемещается под наложением.

Чтобы избежать более темного наложения, этот пример также пропускает собственное наложение, используя "фон: ложь". Есть некоторые предостережения в отношении того, что я решил игнорировать; например, если первый модал позволяет отклонить модал, нажав на фон, вы можете отклонить первый модал, не отклонив второй.

init() Функция, вероятно, является лучшим местом для присоединения класса "push-back" (или вашего аналога), но если вы можете найти решение, которое работает для вас, используйте его.

Единственное, на что следует обратить внимание, это то, что вы захотите удалить класс "push-back", когда второй модал закрыт, иначе вы не сможете взаимодействовать с первым модалом.