bootstrap多层modal框的遮罩问题

在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框层次更多的情况下或许不适用，如果有更好的方法麻烦大家不吝赐教，谢谢。