我需要覆盖显示以上的第一个模式,而不是在后面。

$('#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>

我试图改变。modal- background的z索引,但它变得一团糟。

在某些情况下,我在同一页上有两个以上的情态动词。


当前回答

对我来说,解决这个问题的方法是不要在我的modal div上使用“fade”类。

其他回答

如果你想要一个特定的模态出现在另一个开放模态的顶部,试着在另一个模态div之后添加最上面的模态的HTML。

这招对我很管用:

<div id="modal-under" class="modal fade" ... />

<!--
This modal-upper should appear on top of #modal-under when both are open.
Place its HTML after #modal-under. -->
<div id="modal-upper" class="modal fade" ... />

对我来说,这些简单的scss规则非常有效:

.modal.show{
  z-index: 1041;
  ~ .modal.show{
    z-index: 1043;
  }
}
.modal-backdrop.show {
  z-index: 1040;
  + .modal-backdrop.show{
    z-index: 1042;
  }
}

如果这些规则导致错误的模态在你的情况下,要么改变你的模态div的顺序,或者在上面的scss中改变(奇数)为(偶数)。

结合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警报的验证反馈集成在一起,因为这些使用动态模态,因此需要将事件绑定到document,而不是.modal,因为这只会将它附加到现有的模态。

小提琴。

每个模态都应该有一个不同的id,每个链接都应该指向不同的模态id。所以应该是这样的:

<a href="#myModal" data-toggle="modal">
...
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
...
<a href="#myModal2" data-toggle="modal">
...
<div id="myModal2" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
...

不幸的是,我没有评论的声誉,但应该注意的是,采用硬编码基准1040 z-index的公认解决方案似乎优于试图找到在页面上呈现的最大zIndex计算。

似乎某些扩展/插件依赖于顶级DOM内容,这使得. max计算如此大,以至于它不能再增加zIndex。这会导致一个模态,其中覆盖出现在模态不正确(如果你使用Firebug/谷歌检查器工具,你会看到一个zIndex在2^n - 1的顺序)

我一直无法分离出数学的各种形式的具体原因是什么。z-Index的Max会导致这种情况,但它可能会发生,而且它对少数用户来说是独特的。(我在browserstack上的一般测试让这段代码完美地工作)。

希望这能帮助到一些人。