vue项目中element-ui对话框el-dialog嵌套显示时多了一个遮罩层解决办法

2.如果是el-dialog里又嵌套了一层el-dialog弹框，一定要把内层的dialog加上append-to-body="true",插入至 body 元素，保证层级的正确(elementUI的组件内有更多解释)后来听说用absolute绝对定位也会出现这样的问题，我一看自己的代码，原来是给最外面的div设定位为fixed了，无论是绝对定位还是固定定位，都会使元素脱离文档流，删掉换个布局去实现就好了。

到底是什么问题？ 没错就是这样，就像上图一样，上传完图片需要预览时，图片被蒙层遮罩住了。 下面是整个组件的代码：图片上传、预览、删除，组件方法可以直接去Element-ui官方文档查看。 <template v-slot:img_upload> <el-upload action="#" list-type="picture-card" :limit="9" :auto

关于el-dialog上额外多了一层遮罩层

z-index的设置没有问题，但z-index值大的图层反而显示在了下面。从上面两个截图可以看出，遮罩层是插入到body元素上的，而弹框却是在层级比较深的组件中，所以考虑到是受父元素影响了。审查元素得知，在弹框的父元素中，有对z-index的设置，且值小于2042。从图中可以看出，element-ui对弹框的处理，默认把遮罩层插入至了body元素上，而dialog自身没有插入至body元素。设置modal-append-to-body为false，将遮罩层插入至dialog的父元素上，弹框显示正常。

vue element-ui的嵌套dialog遮罩层打开dialog时，遮罩层直接将全部body遮住内嵌dialog关闭时父级dialog依旧被遮罩层遮住 自己做项目时需要用到嵌套dialog，但是遮罩层的问题踩了2次坑，自己解决办法如下 打开dialog时，遮罩层直接将全部body遮住 这里需要加一句 :modal-append-to-body=‘false’ 就可以解决遮罩层罩住整个body...

如图： 解决办法 在el-dialog标签里添加 :modal-append-to-body='false' 实现效果： 问题解析 先来看看element-ui官网提供的属性说明文档 文档解释：翻译成大白话就是，若el-dialog弹出框设置了modal-append-to-body='true'（默认）属性，它的遮罩层就会被插入到body标签下（即与组件所在的最外层d...

解决vue和element UI中对话框的遮罩层消失，在el-dialog标签里添加 :modal-append-to-body='false' 错误分析 1）若el-dialog弹出框设置了modal-append-to-body='true'（默认）属性，它的遮罩层就会被插入到body标签下（即与组件所在的最外层div同一层级） 2）el-dialog的显示层和遮罩层都设置了posit...

困扰了很久的一个问题，就是用element-ui的浮层组件进行浮层嵌套时候，当子浮层关闭时，父级浮层上面会有一层灰色遮罩层 当关闭子级浮层后，父级浮层上面会有一层灰色蒙层 解决方式： 父级浮层设置:modal-append-to-body="false"属性，同时在子级浮层设置:modal-append-to-body="true" append-to-body属性 Element...

dialog加上**:append-to-body=“true”**,使插入至 body 元素即可，遮罩层会显示在弹框下层。

在一个el-dialog中点击再出现一个el-dialog时会出现一个遮罩层的问题 解决方法：添加:append-to-body="true"属性

el-dialog弹框出现遮罩层,用它自带属性 modal-append-to-body。如果出现多个遮罩层,使用append-to-body。

可以发现el-dialog 组件显示的时候被遮罩层挡住了。

1.不需要遮罩层设置如下属性： <el-dialog :modal="false"></el-dialog> 2.默认点击空白处对话框会关闭，如果需要点击空白不关闭时，设置如下属性即可： <el-dialog :close-on-click-modal="false"></el-dialog> 后期会一直更新，对于用到的都会一点点补充在里面 ...

【代码】elementUI中对话框el-dialog遮罩层问题（遮罩层在内容上面）

阴影的位置和显示方式还可能受到其他属性的影响，比如:modal-append-to-body。如果希望阴影遮罩在dialog框下方，可以设置:modal-append-to-body为false，这样dialog框会保持亮度，而其他区域会变暗。下图是出现的问题，遮罩层在弹框上方。

append-to-body：Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true。先看一下我的问题，使用e-dialog对话框，额外多了一层遮罩，点击一下才能去除遮罩层；在el-dialog上面加上：append-to-body就可以啦！PS：默认是false哦！

用Dialog嵌套Dialog所踩过的坑

elementui 遮罩层bug问题