可以自举模态对话框覆盖另一个对话框吗?

时间:2013-05-14 15:53:17

标签: jquery css twitter-bootstrap modal-dialog

<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> 

一切正常;唯一的问题是第一个对话框显示在第二个对话框的叠加层上。我该如何解决这个问题?

现在的样子: enter image description here

我希望它看起来像这样: enter image description here

9 个答案:

答案 0 :(得分:7)

我写了一篇关于如何以编程方式解决此堆叠问题的博文: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');
}

答案 1 :(得分:2)

我认为模态背景(叠加)由BODY中的所有模态共享。

但是,你可以使用第二个模态中的'show'事件来改变第一个模态的不透明度 - 在第一个模态上给出叠加效果:

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

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

修改

如果要在模态2打开时禁用模态1,则可以在模态2打开时取消绑定模态1,然后在模态1关闭时恢复模态1。 我为此更新了Bootply

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

答案 2 :(得分:1)

您可以将属性添加到“secondModal”

style="z-index:100000;"

答案 3 :(得分:1)

我发现我可以使用此css规则更改第二个“影子”的z-index:

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

比我只需要将第二个对话框的z-index设置为例如1070,就是这样,虽然我不确定与旧浏览器的兼容性。

答案 4 :(得分:1)

万一有人偶然发现了这一点。

  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+';" />'
    
  4. 就是这样。您可以通过搜索“模态背景”在未确定的boostrap.js中找到相同的代码,并按照相同的过程进行操作。

    单击最顶部的背景将隐藏最需要的模态。

答案 5 :(得分:0)

为了使叠加层打开其他叠加层,我在事件监听器中添加了一行简单的JS。

因此,叠加层内的任何链接都将首先关闭它所在的叠加层。

在Bootstrap叠加代码中搜索:

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

添加到该功能:

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

答案 6 :(得分:0)

假设你有模态var modal = $('.some-selector').modal('show'); 首先你要改变它的zIndex,如:modal.css({zIndex: 7760})

您可以在modal.data()找到对其$背景的引用,以便您可以访问它并更改任何内容:modal.data()['bs.modal'].$backdrop.css({zIndex: 7750});

答案 7 :(得分:0)

你可以这样做:(注意:你需要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> 

答案 8 :(得分:0)

以下是对我有用的解决方案:

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

获取详细答案。检查此博客文章

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