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