引導模式對話框可以覆蓋另一個對話框嗎？

Question

<button class="btn" onClick="$('#firstModal').modal('show');">First</button> 

<!-- Modal --> 
<div id="firstModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-body"> 
     <button class="btn" onClick="$('#secondModal').modal('show');">Second</button> 
    </div> 
</div> 

<!-- Modal --> 
<div id="secondModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-body"> 
     Some error message goes here. 
    </div> 
</div> 

一切工作正常;唯一的問題是第一個對話框顯示在第二個對話框的疊加層上。我怎樣才能解決這個問題？

這是現在的樣子：

而且我希望它看起來像這樣：

Answer 1

我發現我可以改變使用這個CSS規則的第二個「影子」的z索引：

.modal-backdrop.fade.in:nth-child(2){ 
    z-index: 1060 !important; 
} 

比我只需要設置第二個對話框的Z-指數例如1070，就是這樣，儘管我不確定是否與舊版瀏覽器兼容。

Answer 2

你可以添加一個屬性 「secondModal」

style="z-index:100000;" 

Answer 3

我想模態背景（疊加）由BODY中的所有模態共享。

但是，你可以使用「顯示」事件從第二模改變對第一模式的不透明度 - 給覆蓋的在第一模態的影響：

$('#myModal2').on('show', function() { 
    $('#myModal').css('opacity', .5); 
}); 

演示：http://bootply.com/61322

編輯：

如果要禁用模式1，而模式2是開放的，模式2打開時，你可以取消綁定模式1，當模式1關閉時恢復模態1。 我更新了這個。

$('#myModal2').on('show', function() { 
    $('#myModal').css('opacity', .5); 
    $('#myModal').unbind(); 
}); 
$('#myModal2').on('hidden', function() { 
    $('#myModal').css('opacity', 1); 
    $('#myModal').removeData("modal").modal({}); 
}); 

Answer 4

要使覆蓋層打開其他覆蓋層，我在事件監聽器中添加了一個簡單的JS行。

這樣的覆蓋內的任何鏈接將首先關閉覆蓋它是在

搜索在引導覆蓋代碼：

$(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) { 

添加到該函數：

$this.closest(".modal").modal('hide'); 

Answer 5

以防萬一有人絆倒了這一點。

1. 在文檔準備功能將此值添加到您的主腳本標記你的頁面

   var current_zindex = 1049; 
   
       var current_zindex_bg = 1048; 
   

2. 上添加

   $('.modal').on('show', function() { 
       current_zindex++;//increment z-index for your modals 
       current_zindex_bg++;//increment z-index for your modal-backdrops 
       $(this).css('z-index',current_zindex); //setting the modal backdrop 
   }); 
   

3. 現在在minifield引導文件本身找到這一位代碼：

   '<div class="modal-backdrop '+r+'" />' //just search for "modal-backdrop" without the quotes 
   
       change to: 
   
       '<div class="modal-backdrop '+r+'" style="z-index:'+current_zindex_bg+';" />' 
   

就是這樣。您可以通過搜索「模態背景」並按照相同的流程在未定義的boostrap.js中找到相同的代碼。

點擊最頂部的背景會隱藏最想要的模式。

Answer 6

我寫了一篇博客文章中有關如何解決這個堆放問題編程：http://gurde.com/stacked-bootstrap-modals/

$(document) 
    .on('show.bs.modal', '.modal', function(event) { 
    $(this).appendTo($('body')); 
    }) 
    .on('shown.bs.modal', '.modal.in', function(event) { 
    setModalsAndBackdropsOrder(); 
    }) 
    .on('hidden.bs.modal', '.modal', function(event) { 
    setModalsAndBackdropsOrder(); 
    }); 

function setModalsAndBackdropsOrder() { 
    var modalZIndex = 1040; 
    $('.modal.in').each(function(index) { 
    var $modal = $(this); 
    modalZIndex++; 
    $modal.css('zIndex', modalZIndex); 
    $modal.next('.modal-backdrop.in').addClass('hidden').css('zIndex', modalZIndex - 1); 
}); 
    $('.modal.in:visible:last').focus().next('.modal-backdrop.in').removeClass('hidden'); 
} 

Answer 7

比方說，你有模態var modal = $('.some-selector').modal('show'); 首先要改變它的zIndex的，如：modal.css({zIndex: 7760})

你可以找到參考其在modal.data()中的$背景，以便您可以訪問它並更改任何內容：modal.data()['bs.modal'].$backdrop.css({zIndex: 7750});

Answer 8

您可以簡單地做t他的方式：（注意：您需要引導3本）

<button class="btn" data-target="#firstModal" data-toggle="modal">First</button> 

<div id="firstModal" data-target="#secondModal" data-dismiss="modal" 
data-toggle="modal"> 
    <div class="modal-body"> 
     <button class="btn" onClick="$('#secondModal').modal('show');">Second</button> 
    </div> 
</div> 

<div id="secondModal" > 
    <div class="modal-body"> 
     Some error message goes here. 
    </div> 
</div>