笔记：ElementUI el-dialog弹框被遮罩层挡住了？Why！！！

最新推荐文章于 2025-09-11 17:20:48 发布
原创 最新推荐文章于 2025-09-11 17:20:48 发布 · 882 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#elementui #vue.js #前端

本文介绍了解决遮罩层默认插入body导致的层级问题的方法。通过设置:modal-append-to-body=false，可以让遮罩层正确地附加到el-dialog的父元素上。

Why Why Why ！！！😵

打开F12 你会看到遮罩层在body上

那是因为遮罩层默认会插到body上导致的 当DOM层级比较多的时候会出现此问题

解决👇👇👇

在标签上添加

 :modal-append-to-body="false"

这样就会添加到el-dialog父级上

skyseey
关注
Element-UI实现el-dialog弹框拖拽功能
觉醒法师的专栏
06-17 9123
在实际开发中，会发现很多系统中弹框是可以在浏览器可见区域自由拖拽的，这极大方便用户的操作。在查看Element-UI中弹框（el-dialog）组件的文档说明后，发现并未实现这一功能，不过也无须担心，vue中提供了Vue.directive钩子函数，可以从底层操作DOM来实现并升级弹框的拖拽功能。
ElementUI--Dialog 弹框的使用
文龙刚的博客
02-21 1796
【代码】ElementUI--Dialog 弹框的使用。
element-ui框架的el-dialog弹出框被遮罩层挡住了
热门推荐
知行合一，跬步致远
07-02 8万+
如图： 解决办法 在el-dialog标签里添加 :modal-append-to-body='false' 实现效果： 问题解析 先来看看element-ui官网提供的属性说明文档 文档解释：翻译成大白话就是，若el-dialog弹出框设置了modal-append-to-body='true'（默认）属性，它的遮罩层就会被插入到body标签下（即与组件所在的最外层d...
element-ui框架的el-dialog弹出框被遮罩层遮挡问题
李十三的博客
06-12 1393
可以发现el-dialog 组件显示的时候被遮罩层挡住了。
el-dialog 组件蒙层把弹框给遮住问题处理
weixin_43837268的博客
05-15 2506
z-index的设置没有问题，但z-index值大的图层反而显示在了下面。从上面两个截图可以看出，遮罩层是插入到body元素上的，而弹框却是在层级比较深的组件中，所以考虑到是受父元素影响了。审查元素得知，在弹框的父元素中，有对z-index的设置，且值小于2042。从图中可以看出，element-ui对弹框的处理，默认把遮罩层插入至了body元素上，而dialog自身没有插入至body元素。设置modal-append-to-body为false，将遮罩层插入至dialog的父元素上，弹框显示正常。
elementui弹出框被遮罩层挡住的问题
nss33678的博客
03-28 1608
2，:modal-append-to-body='false'或者:append-to-body='true'，改变他的这个属性就好。但是遮罩层的范围会变。1，el-dialog直接放在组件最外层div中，就不会出现遮罩问题。偶然发现有个页面会出现这种问题，有两个解决方法。
抽屉（el-drawer）里面嵌套弹出框（el-dialog）出现遮挡弹框问题
future_1_的博客
12-01 2650
抽屉（el-drawer）里面嵌套弹出框（el-dialog）出现遮挡弹框问题
elementui更改el-dialog关闭按钮的图标d的示例代码
10-15
在Element UI框架中，`el-dialog` 是一个用于创建弹出式对话框的组件，它在用户界面中常用于显示重要信息或者进行确认操作。在某些设计需求下，可能需要自定义`el-dialog`的关闭按钮图标以符合特定的品牌风格或者...
【前端Vue】el-dialog关闭后黑色遮罩依然存在如何解决？
最新发布
m0_67519714的博客
09-11 423
【摘要】开发中遇到el-dialog关闭后黑色遮罩残留问题，表现为首次打开弹窗时关闭后遮罩不消失。该问题出现在嵌套弹窗场景（大弹窗含小弹窗），官方文档未明确说明解决方案。AI建议添加:modal-append-to-body="false"属性但效果不稳定。最终通过将:append-to-body属性设置为true成功解决问题，测试未再出现遮罩残留现象。
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
李十三的博客
09-13 2312
参考我的这篇文章,但是在后面我发现只要是会生成v-model元素的饿了么组件,在使用的过程中都可能出现整个页面被遮罩层挡住的情况,解决方法其实都一样.element-ui框架的el-dialog弹出框被遮罩层遮挡问题_前端李十三的博客-优快云博客。element-ui框架的el-dialog弹出框被遮罩层遮挡问题_前端李十三的博客-优快云博客。可以发现el-dialog 组件显示的时候被遮罩层挡住了。可以发现el-dialog 组件显示的时候被遮罩层挡住了。
Vue ElementUI dialog弹出框被遮罩层盖住
LJJONESEED的博客
12-09 953
原因是dialog 里面 套了一个dialog ，需要在里面的dialog 添加一个属性 就好了 <el-dialog :append-to-body="true" >
LuckySheet右键菜单在el-element ui 的el-dialog组件被模式框覆盖问题
何鹏飞的博客
04-26 2403
LuckySheet右键菜单在el-element ui 的el-dialog组件被模式框覆盖问题 1.重载Luckysheet右键菜单样式 在渲染Lucksheet表格的页面引入CSS样式，如下 .luckysheet-cols-menu { z-index: 9004; } 完美解决
elementUI Drawer 抽屉 Dialog 对话框 等弹出组件的遮罩层以及多层遮罩解决办法
小糖穿越火线
10-30 1万+
append-to-body 解决多层遮罩层覆盖的问题 <el-dialog title="编辑处理结果" :visible.sync="dialogVisible" width="600px" :before-close="handleClose" append-to-body > :modal-append-to-body=“false” 解决一层遮罩层覆盖问题 <el-dialog title="编辑处理结果" :visible.sync="dialog
解决vue弹窗被遮罩层遮挡和关闭弹窗后遮罩层不消失的两个问题
weixin_55966654的博客
12-05 8638
（1）弹窗被遮罩层被遮罩层遮挡问题； （2）关闭弹窗后，遮罩层不关闭问题；
解决vue和element UI中对话框的遮罩层消失
浮生离梦的博客
08-09 8467
解决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框架的el-dialog弹出框被遮罩层挡住了，vue-element-ui弹出框和el-select层级混乱
qq_42483780的博客
08-20 5589
Element ui中弹出框、Select 选择器等等弹出被遮盖的问题处理方法 这种问题一般出现在有多个弹出框、弹出框上有select选择器这两种情况。两种情况不同的处理方式如下： 情况A：有多个弹出框，你想要的效果可能是 页面->弹出框A->弹出框B，但是实际上出现的是 页面->弹出框B->弹出框A 如图所示。图是在网上找的 遇到这种情况不要慌，可以在el-dialog标签里添加 : modal-append-to-body=‘false’ 参数：modal-append-to-b
解决 el-dialog 偶现遮罩层问题
多多踩坑
12-30 1527
项目：element + vue 测试浏览器：IE 下图为测试发来的截图，使用 IE 浏览器会偶现打开 dialog 后弹出全局遮罩层，导致表单无法操作 解决：给 dialog 加属性 ---:modal-append-to-body = "false"
解决vue和el-dialog的遮罩层消失
子非渔
11-04 5636
解决vue和element UI中对话框的遮罩层消失，在el-dialog标签里添加 :modal-append-to-body=‘false’ 错误分析 1）若el-dialog弹出框设置了modal-append-to-body=‘true’（默认）属性，它的遮罩层就会被插入到body标签下（即与组件所在的最外层div同一层级） 2）el-dialog的显示层和遮罩层都设置了position:...
Vue + Element UI 对话框外部呈锁定状态方案
欲变世界，先变其身
12-16 1万+
使用对话框组件时，弹出对话框时，点击以外的区域会导致对话框关闭，正确的用户体验应该是只有在点击关闭按钮或者是其他操作性按钮才能使得对话框状态变为关闭。
el-dialog弹框在遮罩层下
04-03
<think>嗯，用户遇到了el-dialog弹框显示在遮罩层下方的问题，需要解决。首先，我应该回忆一下element-ui中el-dialog的z-index相关设置。根据之前的引用资料，遮罩层的z-index通常是2000，而弹框的z-index应该比遮罩层高才能显示在上方。可能用户没有正确设置弹框的z-index，或者有其他元素覆盖了。 接着，检查可能的解决方案。根据引用[1]，设置弹框的样式，比如/deep/ .el-dialog{ z-index: 2001 !important; }，这样可以确保弹框在遮罩层之上。另外，用户可能需要检查是否有其他自定义样式覆盖了默认值，或者是否在嵌套使用时层级计算错误。 另外，动态设置弹框的z-index也是一个方法，比如在打开弹框时设置更高的值。例如，使用:modal-append-to-body="false"属性，避免遮罩层和弹框不在同一层级，导致z-index不生效。引用[2]中提到的拖拽功能可能也会影响层级，需要确保拖拽时z-index更新。 还要考虑全局样式的冲突，检查是否有其他组件或样式表修改了z-index的值，导致遮罩层高于弹框。用户可能需要使用浏览器开发者工具检查元素，确认弹框和遮罩层的实际z-index值，从而调整。 最后，总结几种可能的解决方案：直接修改el-dialog的z-index，调整modal-append-to-body属性，动态设置z-index，以及检查全局样式。需要提醒用户根据具体情况选择合适的方法，并进行测试。</think>### 解决方案：el-dialog弹框显示在遮罩层下方的问题 #### 问题原因 el-dialog的默认层级（`z-index`）为`2000`，而遮罩层（`.v-modal`）的默认层级也为`2000`。当两者层级相同或弹框层级更低时，可能出现弹框被遮罩层覆盖的问题[^1][^2]。 --- #### 解决方法 ##### 1. **直接修改弹框层级** 通过CSS强制提升弹框的`z-index`值： ```css /* 全局样式 */ .el-dialog { z-index: 2001 !important; } /* 若使用scoped样式 */ /deep/ .el-dialog { z-index: 2001 !important; } ``` 此方法确保弹框始终在遮罩层上方。 --- ##### 2. **调整模态框挂载位置** 通过设置`modal-append-to-body="false"`，使遮罩层和弹框脱离同一父容器，避免层级冲突： ```html <el-dialog :visible.sync="dialogVisible" :modal-append-to-body="false" > 弹框内容 </el-dialog> ``` --- ##### 3. **动态设置z-index** 在弹框打开时动态调整层级： ```javascript this.$nextTick(() => { const dialogDom = document.querySelector('.el-dialog'); if (dialogDom) { dialogDom.style.zIndex = 2001; } }); ``` --- ##### 4. **检查全局样式冲突** 使用浏览器开发者工具检查以下内容： - 确认`.el-dialog`和`.v-modal`的实际`z-index`值 - 排查是否有其他CSS覆盖默认值（如全局样式或第三方库） --- #### 验证效果 通过上述方法调整后，弹框会显示在遮罩层上方。若问题仍存在，需进一步检查嵌套组件或复杂布局中的层级叠加逻辑[^3]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值