如果打开第二个模态，则隐藏叠加后面的第一个模态

Question

我有一个模态，其中包含一个触发第二个模态的按钮。问题是第二个模态的叠加层没有首先隐藏。它只会使背景更暗更好我怎样才能使第二个模态叠加隐藏第一个模态？

代码

<div class="container">
    <h3>Modal Example</h3>
    <!-- Button to trigger modal -->
    <div> <a href="#myModal1" role="button" class="btn" data-toggle="modal">Launch Modal</a>
    </div>
    <!-- Modal -->
    <div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3>First Modal</h3>
        </div>
        <div class="modal-body"> <a href="#myModal2" role="button" class="btn" data-toggle="modal">Launch Second Modal</a>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>
<div id="myModal2" class="modal hide" tabindex="-1" role="dialog">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3>Second Modal</h3>
    </div>
    <div class="modal-body"></div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>
</div>

演示http://jsfiddle.net/h3WDq/2/

Answer 1

我有这个jquery解决方案。如果有人有任何css解决方案请建议我

$('#myModal2').on('show.bs.modal', function() {  
    $('.modal').not(this).addClass('opac');
});

$('#myModal2').on('hide.bs.modal', function () {
     $('.modal').not(this).removeClass('opac');
})

http://jsfiddle.net/h3WDq/5/

Answer 2

您可以在打开第二个模态时隐藏第一个模态。

以下是经过修改的jsfiddle：http://jsfiddle.net/patrickhaede/h3WDq/4/

<a href="#myModal2" role="button" class="btn" data-toggle="modal" data-dismiss="modal">Launch Second Modal</a>

这是你的意思吗？

Answer 3

你应该将第一个背景与第二个背景区分开来，所以第一个背景的z-index低于第一个模态，第二个背景的z-index高于第一个模态但低于第二个模式。