it-roy-ru.com

Как открыть два модальных диалога в Twitter Bootstrap одновременно

Я реализовал загрузочный диалог в моем проекте. У меня есть некоторые функции удаления в этом диалоговом окне, и сообщение подтверждения удаления открывает другое диалоговое окно начальной загрузки. Но когда открывается второе диалоговое окно подтверждения, первое диалоговое окно не отключается, и все события работают.

Есть ли решение отключить исходное диалоговое окно, когда открывается другое диалоговое окно?

Вот мой код:

function OpenDialogForSelectionAdmItem(title, content, callback) {
    var dlg = new BootstrapDialog({
        title: title,
        content: content,
        buttons: [{
            label: 'Save',
            cssClass: 'btn-primary',
            id: 'btnSave',
            onclick: function (dialog) {

            }
        },
        {
            label: 'Close',
            cssClass: 'btn',
            id: 'btnClose',
            onclick: function (dialog) {
                if (callback != "") {
                    callback(true);
                }
                dialog.close();
            }
        }]
    });

    dlg.open();`
}

Скриншот:

Screenshot

Когда диалог для подтверждения удаления открыт, я хочу отключить первый диалог.

16
Abhijit Pandya

Эта проблема:

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

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

<div class = "модальный фон исчезает"> </ div> <! - z-индекс: 1030;  -> 
 <div class = "модальный загрузочный диалог"> <! - z-индекс: 1040;  -> 
 <div class = "modal-dialog"> <! - z-индекс: 1050;  -> 

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

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

Решение:

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

Демо в jsFiddle

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


Более продвинутая обработка:

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

Когда создается новый модал, он поставляется со своим собственным modal-backdrop. Когда отображается второй модал, вы можете сделать так, чтобы он отображался над оригиналом, увеличивая его z-индекс относительно первого модала. В событии onshown нам просто нужно захватить текущий модал, и он перекрывает и модифицирует z-index, используя метод .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

Скриншот:

 screenshot


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

Бесконечные диалоги Fiddle


UX Внимание:

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

55
KyleMit

Сначала добавьте класс в основной модал так: <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);

}

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

1
milemilic mile

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

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');
    }
});
0
Raphael Barreto

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

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