在modal框上弹出modal框的时候效果如下
如大家所见,下层并没有进行遮罩,原因是最上层的modal的z-index需要比遮罩大,下层的需要比遮罩小,而modal的遮罩效果z-index为1040
.modal-backdrop {//bootstrap的遮罩属性
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000;
}
我的解决方案如下
$(".editBtn").click(function () {
$("#organizationModal").modal('show');//最上层的modal显示出来
$("#engineeringManagementEdit").css("z-index","1030");//下层的modal框z-index值小于1040
})
对最上层的页面关闭事件调用下面的函数
function organizationBackdrip() {
$("#engineeringManagementEdit").css("z-index","1050");//底层的modal值大于1040即可
$('.modal-backdrop').remove();//去掉遮罩层
}
更改后效果如下
方法可能有点笨拙,如果modal框层次更多的情况下或许不适用,如果有更好的方法麻烦大家不吝赐教,谢谢。