使用 bootstrap 3.3.5 并尝试打开第二个模态,发现一个奇怪的行为:
- 背景不显示在第二个模式周围,而不是它 涵盖第一个模态的背景
- 第二个模态是 仅限于第一个模态的区域。
查看示例:http://jsfiddle.net/2zqe93u1/show/
寻找一种方法来显示第二个模态框及其周围的背景,并且不受第一个模态框的限制。
代码:
<div class="modal bs-modal-lg" id="FirstModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="FiltroLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<span class="modal-title">Title #1</span>
</div>
<div class="modal-body">
<div class="modal" id="SecondModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Title #2</h4>
</div>
<div class="modal-body">
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-number="2">Close</button>
</div>
</div>
</div>
</div>
<a data-toggle="modal" href="#SecondModal" class="btn btn-primary btn-block">Open the second modal</a>
</div>
<div class="modal-footer">
<a data-loading-text="Wait" class="btn btn-default">Cancel</a>
</div>
</div>
</div>
</div>
最佳答案
正如@Tim Lewis 所说,bootstrap 不支持堆叠模态,一次显示多个模态需要自定义代码
首先删除第一个模态中的第二个模态 HTML 并将其放在外面,这样 HTML 将是;
<div class="modal bs-modal-lg" id="FirstModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="FiltroLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<span class="modal-title">Title #1</span>
</div>
<div class="modal-body">
<a data-toggle="modal" href="#SecondModal" class="btn btn-primary btn-block">Open the second modal</a>
</div>
<div class="modal-footer">
<a data-loading-text="Wait" class="btn btn-default">Cancel</a>
</div>
</div>
</div>
</div>
<div class="modal" id="SecondModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Title #2</h4>
</div>
<div class="modal-body">
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-number="2">Close</button>
</div>
</div>
</div>
</div>
它将解决第二个模态限制在第一个模态范围内的问题。
现在解决问题背景不显示在第二个模态周围,而是覆盖第一个模态的背景
在JS中添加如下代码
$(document).ready(function () {
$('#SecondModal').on('show.bs.modal', function () {
$('#FirstModal').css('z-index', 1039);
});
$('#SecondModal').on('hidden.bs.modal', function () {
$('#FirstModal').css('z-index', 1041);
});
});
关于css - 第二模态限于第一模态区,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33484758/