vue项目使用bootstrap模态框叠加滚动条及蒙层解决方案

部分结构代码展示

//第一层模态框
<div class="modal fade" id="addModal1" >
       <div class="modal-dialog modal-sm" style="width:1286px;">
              <div class="modal-content">
                	<div> 第一层模态框显示</div>
                	<button type="button">点击显示第二层模态框</button>
              </div>
       </div>
</div>

// 第二层模态框显示
<div class="modal fade" id="addModal2" >
       <div class="modal-dialog modal-sm" style="width:1286px;">
              <div class="modal-content">
                	<div> 第一层模态框显示</div>
                	<button type="button">点击显示第二层模态框</button>
              </div>
       </div>
</div>

问题一、第二层的模态框蒙层 不会覆盖掉 第一层模态框
原因：
1.bootstrap官网给出明确指示不支持多个模态框同时打开
. 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;
}

效果展示图片
解决问题一

<script>
//vue 钩子函数 （挂载前）
  mounted() {
  // 通过该方法来为每次弹出的模态框设置最新的zIndex值，从而使最新的modal显示在最前面
        $(document).on('show.bs.modal', '.modal', function (event) {
          let zIndex = 1040 + (10 * $('.modal:visible').length);
          $(this).css('z-index', zIndex);
          setTimeout(function() {
            $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
          }, 0);
        });
	}
 </script>

问题二、当第二层模态框消失后，第一层的模态框滚动条失效。当高度超出窗口不能跟着滚动。
原因
监测html发现，当打开模态框时，会给 body 元素加一个 modal-open 的 class，而在 bootstrap.css 中，有这样一条 css 规则：
.modal-open .modal {overflow-x:hidden; overflow-y:auto}
因为有 overflow-y:auto，所以模态框才可以滚动，而当关闭任何一个模态框时，body 元素的 css 规则 modal-open 会被移除掉，自然 overflow-y:auto 也就没有了，所以模态框的滚动条就消失了。

解决方案1：
在第一层的模态框上 添加 style=“overflow: auto” 可以实现当第二层模态框消失之后 第一层 模态框滚动条正常。

<div class="modal fade" ... style="overflow: auto">

带来的问题（我试了一下 可以用，但是 可能会出现两个滚动条同时存在的问题）

解决方案2：

<script>
	//vue 钩子函数 （挂载前）
    mounted() {
	// hidden.bs.modal的意思就是当弹出的模态框消失的时候，接下来回调的函数
	 $('#addModal2').on('hidden.bs.modal', function() {
	 //当第二个模态框消失的时候给body添加一个modal-open （亲测有效）
	         $("body").addClass("modal-open");
	 });
	}

 </script>

综合解决蒙层问题 和 滚动条问题

<script>
	mounted() {
	 // 通过该方法来为每次弹出的模态框设置最新的zIndex值，从而使最新的modal显示在最前面
	        $(document).on('show.bs.modal', '.modal', function (event) {//bootstrap  蒙层的 问题
	          let zIndex = 1040 + (10 * $('.modal:visible').length);
	          $(this).css('z-index', zIndex);
	          setTimeout(function() {
	            $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
	          }, 0);
	          // $('#configModal').modal('hide');
	          $('#configModal').on('hidden.bs.modal', function() {
	            $("body").addClass("modal-open");
	          });
	        });
	}
</script>

最终效果图展示