el-dialog 层级问题混乱

多层dialog弹窗遮罩问题、elementUI的form表单组件的select框在只读的情况下没办法拿到传来的数据、从弹窗子组件获取数据后需要刷新页面

Element ui中弹出框、Select 选择器等等弹出被遮盖的问题处理方法 这种问题一般出现在有多个弹出框、弹出框上有select选择器这两种情况。两种情况不同的处理方式如下： 情况A：有多个弹出框，你想要的效果可能是 页面->弹出框A->弹出框B，但是实际上出现的是 页面->弹出框B->弹出框A 如图所示。图是在网上找的 遇到这种情况不要慌，可以在el-dialog标签里添加 : modal-append-to-body=‘false’ 参数：modal-append-to-b

开发项目时 页面中用到了2个<el-dialog></el-dialog>弹框（或者是dialog中再嵌套dialog），会出现2个灰色蒙版层叠加，需要再点一下蒙层才会消失。 用一个属性解决 :append-to-body="true" 详情转官网：https://element.eleme.cn/#/zh-CN/component/dialog ...

方法土了点, 实属无奈之举, 大家在用的时候类名可以自己定义一下, 我这里直接写成一样的了。

最近在项目中用到el-dialog, 出现了层级问题, 弹框的z-index是比遮罩层的大, 但是遮罩层却显示在弹框上层 , 如下图: 解决方法: 在el-dialog中加上append-to-body <el-dialog title="请确认删除" :visible.sync="dialogRiskPerVisible" append-to-body> <el-row> <el-col :span="24"> &lt

解决弹窗内容被遮罩遮住、弹窗层级样式不够问题 情况一：弹窗层级样式不够。elementui文档上，Message板块有写到可以提供自定义class。通过自己设置类名，可以对其设置相关css属性。 情况二： 弹窗内容被遮罩遮住。

场景图： 解决办法1： 在dialog上面写 <el-dialog :visible.sync="operateVisible" width="50%" top="5vh" append-to-body> 解决办法2： <el-dialog :visible.sync="operateVisible" width="50%" top="5vh" :modal-append-to-body='false'> 参考文章： element 的dialog嵌套问

需要加modal-append-to-body 默认为true，遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上。出现弹框层级错乱问题时可以modal-append-to-body是否设置为false了。为false时的HTML结构。为true时的HTML结构。

本文详细解析了Vue3和ElementPlus中el-drawer在el-dialog中定位混乱的问题，并提供了使用modal-class属性的解决方案。通过CSS定位原理分析和实战代码示例，帮助开发者实现抽屉在对话框内的精确定位，提升中后台管理系统的UI交互体验。

本文深入解析了Vue项目中el-dialog组件黑色遮罩残留问题的原因与解决方案。通过分析DOM结构、遮罩层机制及常见触发场景，提供了调整modal-append-to-body属性、手动销毁遮罩层等多种有效方法，并推荐最佳实践组合，帮助开发者彻底解决这一常见UI问题。

加上append-to-body。

Element UI 两个el-dialog层级

新增按钮弹窗，新增按钮里需要选择部门，又一个弹窗，此时点第二个弹窗的时候页面会灰。model-append-to-body属性是是否让遮罩层插入body上面，如果为false，则遮罩层是在父元素身上的。

当在 Element UI 的弹窗组件中打开另一个弹窗时，可能会出现多层遮罩的问题。这可能导致用户界面不友好，并且影响用户体验。

在使用Element Plus的``组件时，很多情况下我们需要在对话框内部使用``组件，以提供用户选择的功能。然而，由于``会创建一个新的层级（z-index）上下文，而``默认的z-index值较低，可能导致下拉选项框被其他元素覆盖，无法正确显示。最近遇见了这个问题后通过查阅最终解决，特此分享.

css中控制层级的属性 ：z-index ，在style中设置z-index时出现el-dialog的遮罩层大于dialog的现象，在el-dialog上添加tinymce组件，第二次遇到点击tinymce组件上的插件本应出现下拉菜单但无反应的问题。el-dialog中和层级相关的属性：modal-append-to-body。原因就是el-dialog的层级高于下拉菜单的层级，遮挡住了。解决方法是z-index属性直接写在标签内。元素中，避免样式或层级问题。

但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。从 dom 元素我们知道 el-dialog 的层级为三层，外面两层是遮罩，第三层才是真正的弹窗元素，因此，我们需要做的就是把外层最外层的遮罩事件去掉，保留最里面的。el-dialog 隐藏遮罩并且可以控制弹窗后的元素、点击、滚动、其他事件操作，比如一个弹窗打开了，我要能控制弹窗后面的滚动、点击等等一系列事件。首先我们需要隐藏弹窗遮罩。

el-dialog 组件中的 :append-to-body=“true” 属性表示将对话框插入到文档的 元素中。暂时没去研究原理，但是设置了该属性可以实现。