我有一个包含触发第二个模态的按钮的模态。问题是第二个模态的叠加层没有首先隐藏。它只会使背景更暗我怎样才能使第二个模态叠加层隐藏第一个模态?
代码
<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>
最佳答案
我有这个 jquery 解决方案。如果有人有任何 css 解决方案请建议我
$('#myModal2').on('show.bs.modal', function() {
$('.modal').not(this).addClass('opac');
});
$('#myModal2').on('hide.bs.modal', function () {
$('.modal').not(this).removeClass('opac');
})
关于jquery - 如果打开第二个模态,则将第一个模态隐藏在叠加层后面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20840782/