如何在Twitter Bootstrap中同時打開兩個模態對話框

Question

我在我的項目中實現了引導程序對話框。 我在該對話框中有一些刪除功能，刪除確認消息打開另一個引導對話框。 但是當第二個確認對話框打開時，第一個對話框不會被禁用，所有事件都會起作用。

是否有任何解決方案在另一個對話框打開時禁用原始對話框？

這是我的代碼：

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();`
}

截圖：

當刪除確認對話框打開時，我想禁用第一個對話框。

Answer 1

問題：

為了理解Web開發中模態對話框的復雜性，您需要更多地了解z-index屬性和堆棧上下文 。

簡而言之，該對話框的工作原理是向DOM添加兩個主要組件：占據整個屏幕的背景，以及包含對話框的div。 其中每個都從頁面的其余部分中脫穎而出，因為它們被置於DOM的根級別，並為其z-index屬性賦予高值。 多高？ 好吧，嘗試在空白頁面中添加空白模態，您將看到以下DOM元素：

<div class="modal-backdrop fade in"></div>  <!--  -->
<div class="modal bootstrap-dialog">        <!--  -->
    <div class="modal-dialog">              <!--  -->

modal-backdrop給出了真實模態過程的錯覺，因為它首先呈現了阻止點擊在下方任何地方發射的所有其他內容。 允許modal-dialog獲得點擊的唯一原因是，它通過提供更高的z-index而堆疊在背景之上 。

而已！ 這是一大堆技巧。 因此，當bootstrap 警告不要使用多個對話框時 ，他們這樣做是因為堆疊變得棘手。 如果添加另一個元素，它將使用相同的精確z-index進行渲染，這意味着它將位於常規頁面內容之上，但與原始對話框位於同一平面上。 如果它沒有完全覆蓋原件，那么原件仍然可以點擊，因為它上面沒有背景。

解決方案：

為了解決這個問題，您需要提出自己的方法來禁用背景模式的點擊。 此問題似乎已（ 部分 ）得到解決。 請參閱以下示例：

在jsFiddle演示

Bootstrap Dialog使得單擊關閉對話框只會關閉DOM中的最后一個對話框並將事件標記為已處理，因此它不會觸發其他任何內容。 如果第二個模態已啟動並且您單擊它，則唯一會發生的是第二個模態將關閉。

---

更高級處理：

如果你想讓第二個模態看起來像第一個模態，那么你必須手動完成。

當創建新模態時，它會帶有它自己的modal-backdrop 。 當顯示第二個模態時，您可以通過相對於第一個模態遞增其z-index使其顯示在原始模式上方。 在onshown事件中，我們只需要抓取當前模態並使用.CSS方法重疊並修改z-index。 我們希望它出現在任何現有的模態之上，所以首先我們將計算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工作演示

截圖：

---

作為概念驗證，這里有一個Demo，允許您在其他對話框之上不斷添加對話框

無限對話小提琴

---

UX警告：

雖然這在技術上是可以實現的，但是模態中的模態可能會產生令人困惑的UX ，因此如果遇到問題，正確答案可能是通過采用原始工作流並將其推廣到帶有URL的整頁設計來完全避免它和州。

Answer 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);

}

試試看起來對我不錯。

Answer 3

只需使用onclick方法隱藏實際模態

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

Answer 4

我不起眼的解決方案：為每個新模態生成一個新ID。 然后通過一個變量管理所有內容。 這是為了我的目的，順便說一下。

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