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

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>

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

这是它现在的样子：

我希望它看起来像这样：

score 7 · Accepted Answer

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

score 2 · Accepted Answer

我认为模态背景（覆盖）由 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({});
});

score 1 · Accepted Answer

1

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

style="z-index:100000;"

于 2013-05-14T15:55:09.457 回答

score 1 · Accepted Answer

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

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

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

score 1 · Accepted Answer

以防万一有人偶然发现这一点。

将此值添加到页面上的主脚本标记

  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-backdrop”在未缩小的 boostrap.js 中找到相同的代码并遵循相同的过程。

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

score 0 · Accepted Answer

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});

score 0 · Accepted Answer

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

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

在 Bootstrap 覆盖代码中搜索：

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

添加到该功能：

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

score 0 · Accepted Answer

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

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

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

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

score 0 · Accepted Answer

您可以简单地这样做：（注意：为此您需要引导程序 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>

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

9 回答 9

Related

Reference