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

Question

Как открыть два модальных диалога в 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();`
}

Скриншот:

Скриншот

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

18

javascript jquery twitter-bootstrap twitter-bootstrap-3 bootstrap-dialog

Источник

user1878010 28 мар '14 в 12:36

4 ответа

Другие вопросы по тегам javascript jquery twitter-bootstrap twitter-bootstrap-3 bootstrap-dialog

user1366033 25 апр '14 в 23:54 2014-04-25 23:54 · Answer 1 · 2014-04-25 23:54

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

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

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

 z-index: 1030; -> z-index: 1040; ->
     z-index: 1050; ->

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

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

Решение:

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

Демо в jsFiddle

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

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

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

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

Звоните так:

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

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

user4862525 19 май '15 в 10:32 2015-05-19 10:32 · Answer 2 · 2015-05-19 10:32

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

}

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

user3593272 18 мар '16 в 18:31 2016-03-18 18:31 · Answer 3 · 2016-03-18 18:31

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

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

0

Источник

user3593272 18 мар '16 в 18:31

user4832007 02 июн '16 в 19:48 2016-06-02 19:48 · Answer 4 · 2016-06-02 19:48

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

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