一切正常；唯一的問題是第一個對話框顯示在第二個對話框的上面。我該如何解決這個問題？

這是它現在的樣子:

我希望它看起來像這樣:

我寫了一篇關于如何用程序解決這個堆疊問題的博文: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');
}

我認為情態背景是身體中所有情態的共享。

但是，您可以使用第二個模態的“show”事件來更改第一個模態的不透明度——給出覆蓋在第一個模態上的效果:

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

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

編輯:

如果要在模式2打開時禁用模式1，可以在模式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({});
});

您可以為“secondModal”添加一個屬性

style="z-index:100000;"

我發現我可以使用這個css規則改變第二個“陰影”的z-index:

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

然后，我只需要將第二個對話框的z-index設置為例如1070，就可以了，盡管我不確定是否與舊瀏覽器兼容。

以防有人偶然發現這個。

將該值添加到頁面上的主腳本標記中

var current_zindex = 1049;

  var current_zindex_bg = 1048;

在您的文檔就緒函數中添加

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

現在在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+';" />'

就是這樣。您可以通過搜索“modal-background”在未統一的boostrap.js中找到相同的代碼，并遵循相同的過程。

點擊最上面的背景將隱藏你想要的最上面的模態。

為了讓覆蓋圖打開其他覆蓋圖，我在事件監聽器中添加了一行簡單的JS。

因此，覆蓋圖中的任何鏈接都將首先關閉它所在的覆蓋圖。

在引導覆蓋代碼中搜索:

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

為該功能添加:

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

假設你有模態變量modal = $('。一些選擇器)。模態(' show ')； 首先你要改變它的zIndex，比如:modal.css({zIndex: 7760})

您可以在modal.data()中找到對它的$ background的引用，因此您可以訪問它并更改任何內容:modal.data()['bs.modal']。$ background . CSS({ zIndex:7750 })；

您可以簡單地這樣做:(注意:為此您需要bootstrap 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>

以下是對我有效的解決方案:

$("#ModalId").appendTo("body");

詳細答案。查看這篇博文

https://weblog . west-wind . com/posts/2016/sep/14/bootstrap-modal-dialog-showing-under-modal-background

只需將第一個模態的容器的z索引設置為9999。

模態的默認z索引是10000，這意味著第二個模態將出現在第一個模態之上。漸變疊加的默認z索引也是9999，因此當第二個模態在第一個模態之后呈現時，疊加將在第一個模態上呈現。