Bootstrap在一个模态框上弹出另一个模态框遮罩层问题处理方法

2018-05-31 08:03 阅读 1,223 次 评论 0 条

bootstrap3官网明确指出

千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框,需要自己写额外的代码来实现。

bootstrap3相关源码分析

开发过程中经常会遇到在一个模态框上弹出另一个模态框,

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;
}

分析之后的解决方案

那么要想再添加模态框的遮罩层覆盖上一个的模态框,那么这时的遮罩层的z-index必须大于上一个模态框的z-index,并且新的模态框的z-index也必须改变;所以:

var modalLen = $(".modal-backdrop").length,
zIndex = $(".modal-backdrop").eq(0).css("z-index");
for(var i = 1; i < modalLen; i ++){
$(".modal-backdrop").eq(i).css({
"z-index": zIndex + i * 10 + 1
});
$(".modal.in").eq(i).css({
"z-index": zIndex + (i + 1) * 10 + 1
});
}

注意:此种方式的必须注意一点的是  新弹出的模态框div必须在上一个模态框div的后面

把上面的代码放在 bootstrap.js这句代码的前面:

var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })

版权声明:本文著作权归原作者所有,欢迎分享本文,谢谢支持!
转载请注明:Bootstrap在一个模态框上弹出另一个模态框遮罩层问题处理方法 | 猿笔记

发表评论


表情