elementui弹出框被遮罩层挡住的问题

最新推荐文章于 2025-05-23 10:25:29 发布

花生柿子

最新推荐文章于 2025-05-23 10:25:29 发布

阅读量1.5k

点赞数 6

CC 4.0 BY-SA版权

文章标签： elementui

本文链接：https://blog.youkuaiyun.com/nss33678/article/details/137110321

本文介绍了在使用VueElementUI中的el-dialog时遇到的遮罩问题，提出两种解决方案：一是将dialog放置在组件最外层div中，二是调整modal-append-to-body属性以控制遮罩范围。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

偶然发现有个页面会出现这种问题，有两个解决方法。

1，el-dialog直接放在组件最外层div中，就不会出现遮罩问题。

2，:modal-append-to-body='false'或者:append-to-body='true'，改变他的这个属性就好。但是遮罩层的范围会变

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

花生柿子

关注关注

6
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

el-select 组件下拉框被遮挡问题

学无的博客

09-28

1万+

发生这种问题的情况 1.当选择框处于页面边缘 2.它的父级又没有使用fixed 定位 3. 下拉框选项内容过长如下图：解决办法 1.element-ui 的el-select 的下拉框定位它会去判断父级是否有fixed 定位如果有那么下拉框也会是采用fixed 定位，这个时候回去判断浏览器的边框和 el-select 的位置去做定位从而不会超出浏览器。 2. 知道了上面的原理，解决办法就是给父级加fixed 定位，我们只要给父级加 fixed 定位不需要给...

修改vue elementUI多选框问题 elementui lib

01-22

问题：elementUI多选框，一维数组，如官网例子那样数组内元素为字符串时正常使用，但在实际情况多选框的元素为对象，为对象时，默认选中不显示，实际上是选中了，但是不显示 ...

参与评论您还未登录，请先登录后发表或查看评论

elementui弹窗里面出弹窗有一层遮罩问题

m0_47177307的博客

04-06

1638

当在 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...

el-dialog 组件蒙层把弹框给遮住问题处理

weixin_43837268的博客

05-15

2403

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

elementUI vue this.$confirm 和el-dialog 弹出框 移动示例demo

10-16

### el-dialog 弹出框组件 `<el-dialog>`是Element UI提供的一个模态框组件，可以用来创建对话框框体。在文件示例中，我们可以看到如何使用`<el-dialog>`来创建一个包含确认/取消功能的提示弹窗。`<el-dialog>`提供...

详解elementUI中input框无法输入的问题

11-21

最近发现别人项目中在输入密码的时候发现input框无法输入进去 ...到此这篇关于详解elementUI中input框无法输入的问题的文章就介绍到这了,更多相关element input无法输入内容请搜索软件开发网以前的文章或继续浏览下面

关于解决ElementUi中select框在页面滚动时el-option超出元素区域的问题+ cascader滚动超出问题

01-25

首先，我们来分析Select框在页面滚动时el-option超出元素区域的问题。这通常是由于CSS定位不当导致的。ElementUI的Select组件默认使用绝对定位，当页面滚动时，Select的下拉选项可能超出可视窗口。为解决这个问题，...

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

weixin_61397543的博客

11-09

1590

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

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

sky8880的博客

10-14

856

ElementUI el-dialog

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

肖肖肖丽珠的博客

04-01

1万+

首先弹窗一个水平测试报告。然后点击查看解析又可以弹窗一个框这时我们发现这个解析的框被外面一个遮罩层挡住了。我把这个水平测试报告的弹窗写在一个组件里面。在组件里面又写了解析的弹窗。首先查看官网的element-ui的el-dialog的一些属性首先想到是遮罩层的问题所以试了一下在解析的弹窗上加上:modal-append-to-body="false" ...

解决vue弹窗被遮罩层遮挡和关闭弹窗后遮罩层不消失的两个问题

weixin_55966654的博客

12-05

8446

（1）弹窗被遮罩层被遮罩层遮挡问题；（2）关闭弹窗后，遮罩层不关闭问题；

解决elementui关闭子弹窗，遮罩层挡住父弹窗问题

m0_69853343的博客

12-13

805

1.在父弹窗中设置 :modal-append-to-body="false" 和 :append-to-body="true"2.在子弹窗中设置 :append-to-body="true"

elemtui 提示消息element-ui message被遮罩层覆盖解决方法

zhangxueyou2223的博客

09-19

1758

elemtui 提示消息element-ui message被遮罩层覆盖解决方法。

elementUi里的dialog弹出框遮罩层挡住了视图层弹出框内容解决办法！

海贼王某人的博客

08-21

1046

今天写着写着突然出了一个bug,很是郁闷，看下图解决办法很简单看代码：:modal-append-to-body=‘false’ //加上这个属性就可以了 <el-dialog :modal-append-to-body='false' width="33%" top='38vh' title="新建群聊" :visible.sync="showAdd"> ...

element-ui 弹窗里面嵌套弹窗，解决第二个弹窗被遮罩层掩盖无法显示的问题

锦瑟年华L的博客

08-28

5871

具体使用就是在第一个弹窗中设置 :modal-append-to-body="false" ，在第二个弹窗中设置 :append-to-body="true"我们可以把两个弹窗平级写在主页面中，并同时给2个弹窗设置 :append-to-body="true"这样就能实现我们想要的效果了。

解决vue多层弹框时存在遮挡问题

风清扬的专栏

07-11

1622

本文给大家介绍vue多层弹框时存在遮挡问题，解决思路首先想到的是找到对应的遮挡层的css标签，然后修改z-index值，但是本思路只能解决首次问题，再次打开还会存在相同的问题，故该思路错误，下面给大家带来一种正确的思路，一起看看吧。

elmentui的抽屉无法点击下层

02-05

Element UI 的抽屉组件 (Drawer) 无法点击到下层内容的问题通常是由于 z-index 样式属性引起的。z-index 属性用于设置元素的堆叠顺序，值越大表示越靠上显示。如果你遇到 Drawer 组件挡住背景页面并且导致背景不可点击的情况，可以尝试以下几种解决方案： ### 解决方案一：调整 z-index 你可以通过自定义样式增加 `body` 或者其他遮罩层外容器的 z-index 来解决这个问题: ```css .el-drawer__wrapper { /* 确保遮罩层足够高 */ } /* 让除弹框以外的内容可用 */ .v-modal { pointer-events: none; // 关键点在于此，使得模态框背后依然能接收到鼠标事件 } /* 如果你想让整个modal区域都可以穿透则需要再添加下面这一行 */ /*.el-dialog{pointer-events:none;}*/ ``` 请注意上述 CSS 可能在某些版本中有所不同，具体取决于你使用的 ElementUI 版本号以及是否有额外的主题覆盖等特殊配置因素影响。 ### 解决方案二：修改默认 modal 设置部分场景下可通过关闭 Modal 蒙版的方式来直接解决问题，在打开 drawer 时将 `append-to-body` 和 `modal` 参数设为 false 即可避免其自动创建蒙版而阻断交互操作。示例代码如下： ```vue <template> <el-drawer :visible.sync="drawerVisible" append-to-body=false modal=false size='50%'>  </el-drawer> </template> <script> export default{ data() { return { drawerVisible:false, } }, }; </script> ``` 这两种办法都能有效缓解因为 Drawer 弹出之后造成的底层元素失去响应能力的现象。