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

一切正常;唯一的问题是第一个对话框显示在第二个对话框的覆盖层上。我怎样才能解决这个问题?

这是它现在的样子: 在此处输入图像描述

我希望它看起来像这样: 在此处输入图像描述

4

9 回答 9

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');
}
于 2014-07-15T15:46:30.240 回答
2

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

但是,您可以使用第二个模态中的“显示”事件来更改第一个模态的不透明度——在第一个模态上给出覆盖的效果:

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

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

编辑

如果想在 modal 2 打开时禁用 modal 1,可以在 modal 2 打开时解除 modal 1 的绑定,然后在 modal 1 关闭时恢复 modal 1。我为此更新了Bootply

$('#myModal2').on('show', function() {
    $('#myModal').css('opacity', .5);
    $('#myModal').unbind();
});
$('#myModal2').on('hidden', function() {
    $('#myModal').css('opacity', 1);
    $('#myModal').removeData("modal").modal({});
});
于 2013-05-14T17:43:43.177 回答
1

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

style="z-index:100000;"
于 2013-05-14T15:55:09.457 回答
1

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

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

比我只需要将第二个对话框的 z-index 设置为例如 1070 就可以了,尽管我不确定与旧浏览器的兼容性。

于 2013-05-15T09:18:59.543 回答
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+';" />'
    

而已。您可以通过搜索“modal-backdrop”在未缩小的 boostrap.js 中找到相同的代码并遵循相同的过程。

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

于 2013-10-24T21:20:16.643 回答
0

Let's say you have modal var modal = $('.some-selector').modal('show'); first you want to change it's zIndex like: modal.css({zIndex: 7760})

you can find reference to its $backdrop in modal.data(), so you can access it and change anything: modal.data()['bs.modal'].$backdrop.css({zIndex: 7750});

于 2015-02-13T11:30:06.950 回答
0

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

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

在 Bootstrap 覆盖代码中搜索:

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

添加到该功能:

$this.closest(".modal").modal('hide');
于 2013-10-02T23:25:49.640 回答
0

这是对我有用的解决方案:

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

对于详细的答案。检查这篇博文

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

于 2020-12-06T14:47:53.257 回答
0

您可以简单地这样做:(注意:为此您需要引导程序 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> 
于 2017-09-11T17:24:23.637 回答