bootstrap在一个模态框上弹出另一个模态框遮罩层问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_24591547/article/details/72830599

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