Bootstrap

ElementUI Dialog打开时出现遮罩层

el-dialog设置遮罩层,

:modal=true:modal-append-to-body=true

在打开dialog,有遮罩时,解决方案如下

:append-to-body="true"

自定义遮罩层:

<div v-if="showModal" class="mask">
   <img class="loading-image" src="../../image/loading.gif" alt="正在处理,请等待。。。">
 </div>
    
.mask {
	 background-color: rgb(0, 0, 0);
	 opacity: 0.3;
	 position: fixed;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 z-index: 1
}

注意:

  • 解决多层遮罩层覆盖的问题 :append-to-body="true"
  • 解决一层遮罩层覆盖问题:modal-append-to-body="false"
  • 如果dialog是嵌套的情况,可以将最外层的遮罩去掉:modal = "false"
  • z-index 属性:设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

参考文章:
[1] 解决打开和关闭都有遮罩的情况

;