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

element ui 弹窗遮罩层在弹出层的上面。点击关闭弹窗弹窗关闭了但是遮罩层没关_第1张图片

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

element ui 弹窗遮罩层在弹出层的上面。点击关闭弹窗弹窗关闭了但是遮罩层没关_第2张图片

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

 

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

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

 

element ui 弹窗遮罩层在弹出层的上面。点击关闭弹窗弹窗关闭了但是遮罩层没关_第3张图片

 

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

element ui 弹窗遮罩层在弹出层的上面。点击关闭弹窗弹窗关闭了但是遮罩层没关_第4张图片

 

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

element ui 弹窗遮罩层在弹出层的上面。点击关闭弹窗弹窗关闭了但是遮罩层没关_第5张图片

element ui 弹窗遮罩层在弹出层的上面。点击关闭弹窗弹窗关闭了但是遮罩层没关_第6张图片

 

 

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

element ui 弹窗遮罩层在弹出层的上面。点击关闭弹窗弹窗关闭了但是遮罩层没关_第7张图片

element ui 弹窗遮罩层在弹出层的上面。点击关闭弹窗弹窗关闭了但是遮罩层没关_第8张图片

 

 

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

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

你可能感兴趣的:(element-ui)