部分结构代码展示
//第一层模态框
<div class="modal fade" id="addModal1" >
<div class="modal-dialog modal-sm" style="width:1286px;">
<div class="modal-content">
<div> 第一层模态框显示</div>
<button type="button">点击显示第二层模态框</button>
</div>
</div>
</div>
// 第二层模态框显示
<div class="modal fade" id="addModal2" >
<div class="modal-dialog modal-sm" style="width:1286px;">
<div class="modal-content">
<div> 第一层模态框显示</div>
<button type="button">点击显示第二层模态框</button>
</div>
</div>
</div>
问题一、第二层的模态框蒙层 不会覆盖掉 第一层模态框
原因:
1.bootstrap官网给出明确指示不支持多个模态框同时打开
. bootstrap.css中 模态框的z-index为1050
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
display: none;
overflow: hidden;
-webkit-overflow-scrolling: touch;
outline: 0;
}
遮罩层z-index为1040
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000;
}
效果展示图片
解决问题一
<script>
//vue 钩子函数 (挂载前)
mounted() {
// 通过该方法来为每次弹出的模态框设置最新的zIndex值,从而使最新的modal显示在最前面
$(document).on('show.bs.modal', '.modal', function (event) {
let 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);
});
}
</script>
问题二、当第二层模态框消失后,第一层的模态框滚动条失效。当高度超出窗口不能跟着滚动。
原因
监测html发现,当打开模态框时,会给 body 元素加一个 modal-open 的 class,而在 bootstrap.css 中,有这样一条 css 规则:
.modal-open .modal {overflow-x:hidden; overflow-y:auto}
因为有 overflow-y:auto,所以模态框才可以滚动,而当关闭任何一个模态框时,body 元素的 css 规则 modal-open 会被移除掉,自然 overflow-y:auto 也就没有了,所以模态框的滚动条就消失了。
解决方案1:
在第一层的模态框上 添加 style=“overflow: auto” 可以实现当第二层模态框消失之后 第一层 模态框滚动条正常。
<div class="modal fade" ... style="overflow: auto">
带来的问题(我试了一下 可以用,但是 可能会出现两个滚动条同时存在的问题)
解决方案2:
<script>
//vue 钩子函数 (挂载前)
mounted() {
// hidden.bs.modal的意思就是当弹出的模态框消失的时候,接下来回调的函数
$('#addModal2').on('hidden.bs.modal', function() {
//当第二个模态框消失的时候给body添加一个modal-open (亲测有效)
$("body").addClass("modal-open");
});
}
</script>
综合解决蒙层问题 和 滚动条问题
<script>
mounted() {
// 通过该方法来为每次弹出的模态框设置最新的zIndex值,从而使最新的modal显示在最前面
$(document).on('show.bs.modal', '.modal', function (event) {//bootstrap 蒙层的 问题
let 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);
// $('#configModal').modal('hide');
$('#configModal').on('hidden.bs.modal', function() {
$("body").addClass("modal-open");
});
});
}
</script>
最终效果图展示