element 的dialog弹出会被遮住，如何解决？

最新推荐文章于 2024-03-18 17:28:02 发布
最新推荐文章于 2024-03-18 17:28:02 发布
阅读量792 收藏 1
点赞数
分类专栏： vue dialog遮罩问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sicily_winner/article/details/109989324
版权
本文探讨了Element UI中Dialog弹出框遇到的遮罩层遮挡问题，提供了两种解决方法：1) 在Dialog上进行调整；2) 参考相关文章寻找答案，特别是针对dialog嵌套和el-select组件层级混乱的情况。
摘要由CSDN通过智能技术生成

场景图：

解决办法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'>

参考文章：

  1. elemen
最低0.47元/天 解锁文章
winner_corl
关注
专栏目录
记录:element 的dialog嵌套问题，第二次弹出的会被遮住，怎么解决?【亲测有效】
**My Coding Family**
04-02 2万+
记录:element 的dialog嵌套问题，第二次弹出的会被遮住，怎么解决?【亲测有效】
TinyMCE富文本在Vue element的dialog中(modal)插件被遮挡或者是组件下拉框层级显示不正确
qq_21991909的博客
06-18 1721
tinymec富文本封装自己的组件在dialog中调用时插件和按钮层级显示不正确的问题
element-ui框架的el-dialog弹出框被遮罩层挡住了
weixin_30879833的博客
07-03 300
解决办法 在el-dialog标签里添加 :modal-append-to-body='false' 转载于:https://www.cnblogs.com/shy1766IT/p/11124147.html
element中在dialog对话框中在弹出dialog对话框，页面会被遮罩层挡住问题
cmj8043719242的博客
07-07 622
element嵌套dialog遮罩层的问题 根据官方文档，我们只需要在第二个dialog组件上添加
Element ui Dialog 对话框遮罩层挡住对话框问题
tian_nao的博客
12-09 777
Eelment-ui Dialog 对话框组件遮罩层挡住对话框问题
vue element-ui 关于遮罩层挡住了dialog对话框的问题
weixin_44408018的博客
02-19 453
遇到遮罩层挡住对话框，调整对话框位置，一般放在最前面
【Element】element-plus中el-dialog弹窗隐藏遮罩并可以控制弹窗后的元素、点击、滚动、其他事件操作等
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
11-29 3638
但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。从 dom 元素我们知道 el-dialog 的层级为三层，外面两层是遮罩，第三层才是真正的弹窗元素，因此，我们需要做的就是把外层最外层的遮罩事件去掉，保留最里面的。el-dialog 隐藏遮罩并且可以控制弹窗后的元素、点击、滚动、其他事件操作，比如一个弹窗打开了，我要能控制弹窗后面的滚动、点击等等一系列事件。首先我们需要隐藏弹窗遮罩。
iframe弹出框遮罩父类页面
08-22
总的来说，"iframe弹出框遮罩父类页面"是一个常见的前端交互需求，通过合理使用`iframe`、JavaScript和CSS，以及像EasyUI这样的库，可以实现高效、简洁的解决方案。理解并掌握这些知识点对于提升网页交互体验至关...
el-dialog遮罩层把内容遮住
10-19
el-dialog是一个基于Element UI的弹出框组件，它的遮罩层和显示层都设置了position:fixed。如果el-dialog的父级元素也设置了position:fixed，并且其z-index比弹出框的遮罩层小，就会出现遮罩层把内容遮挡的问题。...
element-ui dialog遮罩层在最上层，关掉dialog遮罩层还在
yuxuan89814的专栏
03-20 3321
element-ui dialog遮罩层遮挡
vue中使用elementui的el-dialog遮罩问题
08-29 4276
elementui中的el-dialog有时候会出现以下这种问题，内容在遮罩阴影之下的情况 解决这种情况的方法很简单，在el-dialog标签中添上这个:append-to-body="true"属性即可，如下： :append-to-body="true"
解决element中对话框遮挡的问题，让你的页面更美观
希望看完文章的你能够带着答案离开
11-04 3324
解决element中对话框遮挡的问题，让你的页面更美观
vue3+element-plus中dialog对话框组件去掉遮罩层后可以操作底层页面，以及弹窗嵌套弹窗如何去掉遮罩层且可以操作底层页面
最新发布
liuzaixi的博客
03-18 2529
三、如果是弹窗嵌套弹窗，以上方法可能不会去掉遮罩层，这时就需要添加官网给出的另一个属性：append-to-body，具体解释可以查看官网。是自定义类名，和下面代码中的类名相同即可。
Vue + Bootstrap|Element UI——模态框被遮罩层遮盖问题解决方案
无限迭代中......
03-21 2734
问题描述 问题分析 1）若dialog弹出框，它的遮罩层就会被插入到body标签下（即与组件所在的最外层div同一层级） Element UI中设置了modal-append-to-body='true'（默认）属性 2）dialog的显示层和遮罩层都设置了position:fixed，当然显示层的z-index肯定要比遮罩层的大，才能正常的显示弹出框。 问题就出在此处，若dia...
elementUi里的dialog弹出框遮罩层挡住了视图层弹出框内容解决办法！
weixin_53641562的博客
07-17 444
elementUi里的dialog弹出框遮罩层挡住了视图层弹出框内容解决办法！
Vue ElementUI dialog弹出框被遮罩层盖住
热门推荐
linxd的博客
03-08 1万+
这个问题遇到了好几次了，这次找到问题的原因了 原因一： 因为dialog的组件外层div设置了 position：absolute； 属性所以导致遮罩层会在最上面 原因二： 因为是dialog 里面 套了一个dialog ，需要在里面的dialog :append-to-body=“true” **************************** ...
el-dialog 组件蒙层把弹框给遮住问题处理
weixin_43837268的博客
05-15 2259
z-index的设置没有问题，但z-index值大的图层反而显示在了下面。从上面两个截图可以看出，遮罩层是插入到body元素上的，而弹框却是在层级比较深的组件中，所以考虑到是受父元素影响了。审查元素得知，在弹框的父元素中，有对z-index的设置，且值小于2042。从图中可以看出，element-ui对弹框的处理，默认把遮罩层插入至了body元素上，而dialog自身没有插入至body元素。设置modal-append-to-body为false，将遮罩层插入至dialog的父元素上，弹框显示正常。
笔记：ElementUI el-dialog弹框被遮罩层挡住了？Why！！！
sky8880的博客
10-14 795
ElementUI el-dialog
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值