element ui 弹窗遮罩层在弹出层的上面。点击关闭弹窗弹窗关闭了但是遮罩层没关

首先弹窗一个水平测试报告。然后点击查看解析又可以弹窗一个框

这时我们发现这个解析的框被外面一个遮罩层挡住了。

 

我把这个水平测试报告的弹窗写在一个组件里面。在组件里面又写了解析的弹窗。

首先查看官网的element-ui的el-dialog的一些属性

 

 

首先想到是遮罩层的问题所以试了一下在解析的弹窗上加上:modal-append-to-body="false"

 

看效果是我们最终想要的。但是点击×把解析页面关闭了遮罩层并没有关。

 

 

最后找到了解决办法在解析的弹窗上加上:append-to-body="true" 。发现这才是我们想要的效果

 

 

总结当弹窗嵌套弹窗的时候就会出现这样的问题。

只要把嵌套的那个弹窗加到body上。把:append-to-body="true"