多个模态叠加

Question

我需要叠加显示在第一个模态上方,而不是在后面.

$('#openBtn').click(function(){
	$('#myModal').modal({show:true})
});

<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>

<div class="modal" id="myModal">
	<div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title">Modal title</h4>
        </div><div class="container"></div>
        <div class="modal-body">
          Content for the dialog / modal goes here.
          <br>
          <br>
          <br>
          <br>
          <br>
          <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal</a>
        </div>
        <div class="modal-footer">
          <a href="#" data-dismiss="modal" class="btn">Close</a>
          <a href="#" class="btn btn-primary">Save changes</a>
        </div>
      </div>
    </div>
</div>
<div class="modal" id="myModal2" data-backdrop="static">
	<div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title">Second Modal title</h4>
        </div><div class="container"></div>
        <div class="modal-body">
          Content for the dialog / modal goes here.
        </div>
        <div class="modal-footer">
          <a href="#" data-dismiss="modal" class="btn">Close</a>
          <a href="#" class="btn btn-primary">Save changes</a>
        </div>
      </div>
    </div>
</div>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.min.js"></script>

我试图改变z-index的.modal-backdrop,但它成了一个烂摊子.

在某些情况下,我在同一页面上有两个以上的模态.

Answer 1

在看到许多针对此的修复之后,并没有一个完全符合我的需要,我想出了一个更短的解决方案,其灵感来自@YermoLamers和@Ketwaroo.

背景z-index修复
此解决方案使用a,setTimeout因为触发.modal-backdrop事件时不会创建show.bs.modal.

$(document).on('show.bs.modal', '.modal', function () {
    var zIndex = 1040 + (10 * $('.modal:visible').length);
    $(this).css('z-index', zIndex);
    setTimeout(function() {
        $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
    }, 0);
});

• 这适用于.modal页面上创建的每个(甚至是动态模态)
• 背景立即覆盖以前的模态

示例jsfiddle

如果你因为任何原因不喜欢硬编码的z-index,你可以像这样计算页面上最高的z-index:

var zIndex = Math.max.apply(null, Array.prototype.map.call(document.querySelectorAll('*'), function(el) {
  return +el.style.zIndex;
})) + 10;

滚动条修复
如果页面上的模态超出了浏览器高度,则在关闭第二个模式时无法滚动它.要修复此添加:

$(document).on('hidden.bs.modal', '.modal', function () {
    $('.modal:visible').length && $(document.body).addClass('modal-open');
});

版本
此解决方案使用bootstrap 3.1.0 - 3.3.5进行测试

Answer 2

我意识到答案已经被接受,但我强烈建议不要黑客自举来解决这个问题.

您可以通过挂钩shown.bs.modal和hidden.bs.modal事件处理程序并在那里调整z-index来轻松实现相同的效果.

这是一个有效的例子

这里有更多信息.

此解决方案可自动使用任意深度堆栈模式.

脚本源代码:

$(document).ready(function() {

    $('.modal').on('hidden.bs.modal', function(event) {
        $(this).removeClass( 'fv-modal-stack' );
        $('body').data( 'fv_open_modals', $('body').data( 'fv_open_modals' ) - 1 );
    });

    $('.modal').on('shown.bs.modal', function (event) {
        // keep track of the number of open modals
        if ( typeof( $('body').data( 'fv_open_modals' ) ) == 'undefined' ) {
            $('body').data( 'fv_open_modals', 0 );
        }

        // if the z-index of this modal has been set, ignore.
        if ($(this).hasClass('fv-modal-stack')) {
            return;
        }

        $(this).addClass('fv-modal-stack');
        $('body').data('fv_open_modals', $('body').data('fv_open_modals' ) + 1 );
        $(this).css('z-index', 1040 + (10 * $('body').data('fv_open_modals' )));
        $('.modal-backdrop').not('.fv-modal-stack').css('z-index', 1039 + (10 * $('body').data('fv_open_modals')));
        $('.modal-backdrop').not('fv-modal-stack').addClass('fv-modal-stack'); 

    });        
});

Answer 3

根据Yermo Lamers的建议,这个更短的版本,这似乎工作正常.即使有基本的动画,如淡入/淡出,甚至疯狂的蝙蝠侠报纸旋转.http://jsfiddle.net/ketwaroo/mXy3E/

$('.modal').on('show.bs.modal', function(event) {
    var idx = $('.modal:visible').length;
    $(this).css('z-index', 1040 + (10 * idx));
});
$('.modal').on('shown.bs.modal', function(event) {
    var idx = ($('.modal:visible').length) -1; // raise backdrop after animation.
    $('.modal-backdrop').not('.stacked').css('z-index', 1039 + (10 * idx));
    $('.modal-backdrop').not('.stacked').addClass('stacked');
});

Answer 4

结合A1rPun的回答和StriplingWarrior的建议,我提出了这个:

$(document).on({
    'show.bs.modal': function () {
        var zIndex = 1040 + (10 * $('.modal:visible').length);
        $(this).css('z-index', zIndex);
        setTimeout(function() {
            $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
        }, 0);
    },
    'hidden.bs.modal': function() {
        if ($('.modal:visible').length > 0) {
            // restore the modal-open class to the body element, so that scrolling works
            // properly after de-stacking a modal.
            setTimeout(function() {
                $(document.body).addClass('modal-open');
            }, 0);
        }
    }
}, '.modal');

甚至可以用于事后添加的动态模态,并删除第二个滚动条问题.我发现这个最有用的东西是将模态中的表单与来自Bootbox警报的验证反馈集成,因为那些使用动态模态,因此需要将事件绑定到文档而不是.modal,因为它只将它附加到现有情态动词.

在这里小提琴

Answer 5

我创建了一个Bootstrap插件,其中包含了很多这里发布的想法.

Bootply上的演示:http://www.bootply.com/cObcYInvpq

Github:https://github.com/jhaygt/bootstrap-multimodal

它还解决了连续模态的问题,导致背景变得更暗和更暗.这可确保在任何给定时间只能看到一个背景:

if(modalIndex > 0)
    $('.modal-backdrop').not(':first').addClass('hidden');

可见背景的z-index在show.bs.modal和hidden.bs.modal事件上都会更新:

$('.modal-backdrop:first').css('z-index', MultiModal.BASE_ZINDEX + (modalIndex * 20));

Answer 6

当解决堆栈模式时,在关闭一个主页面时,我发现较新版本的Bootstrap(至少从版本3.0.3开始)不需要任何额外的代码来堆叠模态.

您可以在页面中添加多个模式(当然具有不同的ID).打开多个模态时发现的唯一问题是关闭一个删除modal-open主体选择器的类.

您可以使用以下Javascript代码重新添加modal-open:

$('.modal').on('hidden.bs.modal', function (e) {
    if($('.modal').hasClass('in')) {
    $('body').addClass('modal-open');
    }    
});

如果您不需要叠加模式的背景效果,则可以进行设置data-backdrop="false".

版本3.1.1.修复修复模态背景覆盖模态的滚动条,但上述解决方案似乎也适用于早期版本.

Answer 7

Bootstrap 4.5 的简单解决方案

.modal.fade {
  background: rgba(0, 0, 0, 0.5);
}

.modal-backdrop.fade {
  opacity: 0;
}

Answer 8

如果您正在寻找 Bootstrap 4 解决方案，那么使用纯 CSS 有一个简单的解决方案：

.modal.fade {
    background: rgba(0,0,0,0.5);
}

Answer 9

终于解决了.我在很多方面测试它并且工作正常.

以下是具有相同问题的任何人的解决方案:更改Modal.prototype.show函数(在bootstrap.js或modal.js)

从:

if (transition) {
   that.$element[0].offsetWidth // force reflow
}   

that.$element
   .addClass('in')
   .attr('aria-hidden', false)

that.enforceFocus()

至:

if (transition) {
    that.$element[0].offsetWidth // force reflow
}

that.$backdrop
   .css("z-index", (1030 + (10 * $(".modal.fade.in").length)))

that.$element
   .css("z-index", (1040 + (10 * $(".modal.fade.in").length)))
   .addClass('in')
   .attr('aria-hidden', false)

that.enforceFocus()

这是我找到的最佳方式:检查打开了多少个模态,并将模态和背景的z-index更改为更高的值.

Answer 10

尝试将以下内容添加到 bootply 上的 JS 中

$('#myModal2').on('show.bs.modal', function () {  
$('#myModal').css('z-index', 1030); })

$('#myModal2').on('hidden.bs.modal', function () {  
$('#myModal').css('z-index', 1040); })

解释：

在尝试了这些属性（使用 Chrome 的开发工具）后，我意识到z-index下面的任何值1031都会将事物置于背景后面。

因此，通过使用引导程序的模态事件句柄，我将其设置z-index为1030。如果#myModal2显示，则将z-index后面设置为1040如果#myModal2隐藏。

演示