引导模式对话框可以覆盖另一个对话框吗？

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>