Ответ 1

Проблема:

Чтобы понять тонкости модальных диалогов в веб-разработке, вам нужно немного подробнее узнать о свойства z-index и контекстах стекирования.

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

<div class="modal-backdrop fade in"></div>  <!-- z-index: 1030; -->
<div class="modal bootstrap-dialog">        <!-- z-index: 1040; -->
    <div class="modal-dialog">              <!-- z-index: 1050; -->

modal-backdrop дает иллюзию истинного модального процесса, потому что он отображает выше всего другого содержимого, которое предотвращает запуск стрелок в любом месте ниже. Единственной причиной, по которой modal-dialog разрешено получать клики, является то, что она укладывается поверх фона, обеспечивая более высокий индекс z.

Что это!. Это целая сумка трюков. Поэтому, когда bootstrap предостерегает от использования нескольких диалогов, они делают это, потому что укладка становится сложной. Если вы добавите другой элемент, он будет отображаться с тем же точным z-index, что означает, что он будет выше обычного содержимого страницы, но на той же плоскости, что и исходный диалог. Если он не полностью покрывает оригинал, оригинал будет по-прежнему доступен, потому что на нем нет фона.

Решение:

Чтобы решить эту проблему, вам нужно придумать свой способ отключения кликов по фонологическим модалам. Эта проблема, по-видимому, была (частично) решена. См. Следующий пример:

Демо в jsFiddle

Bootstrap Dialog сделал это так, чтобы щелчок по диалоговому окну просто закрывал последний диалог в DOM и отмечал событие как обработанное, чтобы он ничего не срабатывал. Если второй модальный вверх и вы его отключаете, единственное, что произойдет, это второй модальный закроется.

Дополнительная обработка:

Если вы хотите, чтобы второй модальный формат выглядел как первый, вам придется сделать это вручную.

Когда новый модаль создан, он поставляется с собственным modal-backdrop. Когда показан второй модальный, вы можете увидеть его выше оригинала, увеличив его индекс z относительно первого модального. В событии onshown нам просто нужно захватить текущий модальный и наложить и изменить z-индекс, используя метод .CSS. Мы хотим, чтобы это появилось над любыми существующими модалами, поэтому сначала мы будем подсчитывать количество модалов в DOM ($('.bootstrap-dialog').length), а затем увеличиваем z-индекс, чтобы он был выше, чем следующий самый высокий диалог.

Вызов:

function OpenDialogForSelectionAdmItem(title, content, callback) {
    var dlg = new BootstrapDialog({
        title: title,
        message: content,
        onshown: function(dialog) {
            var tier = $('.bootstrap-dialog').length - 1;
            dialog.$modal.prev(".modal-backdrop")
                .css("z-index", 1030 + tier * 30);
            dialog.$modal
                .css("z-index", 1040 + tier * 30);
        } 
        // More Settings
    }).open();
}

Рабочая демонстрация в jsFiddle

Снимок экрана:

Как доказательство концепции, вот демо, которое позволяет вам постоянно добавлять диалоги поверх других диалогов

Скриншот бесконечной диалогов

Еще несколько заметок:

Я использую единственную библиотеку начальной загрузки, которую я мог бы найти из следующего проекта GitHub:

http://nakupanda.github.io/bootstrap3-dialog/

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

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

• onclick → action
• content → message

Вы можете увидеть мою скрипку для полной реализации.

Ответ 2

Сначала добавьте класс в первичный модальный так: <div class="modal-content kk"> Я просто использую:

$('#myModal1').on('shown.bs.modal', function () {
  $('.kk').addClass('magla');
  $('#myModal').modal('hide');
 });
$('#myModal1').on('hidden.bs.modal', function () {
  $('.kk').removeClass('magla');
  $('#myModal').modal('show');


});

где .magla css:

.magla {
     -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);

}

Попробуйте выглядит хорошо для меня.

Ответ 3

Просто скройте фактический модальный метод, используя метод onclick

<button data-toggle="modal" data-target="#modal-to-show-id" onclick="$('#actual-modal-id').modal('hide');">
    Text Button
</button>

Ответ 4

Мое скромное решение: Создайте новый идентификатор для каждого нового модального. Затем просто управляйте всем через одну переменную. Это работает для моих целей, кстати.

var _MODAL_LAST;
$( document ).on( 'show.bs.modal' , '.modal' , function(){
    _MODAL_LAST = $(this);
});
$( document ).on( 'hide.bs.modal' , '.modal' , function(){
    if( _MODAL_LAST.attr('id') !== $(this).attr('id') ){
        return false;
    }else{
        _MODAL_LAST = $(this).prevAll('.modal:first');
    }
});