fixed导致子元素本该显示的el-dialog弹框被遮罩层覆盖的解决办法

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

#vue #css

在使用Element UI的el-table组件时，为实现表头固定效果，给el-table-column添加了fixed属性。然而，这导致了el-dialog弹框被遮罩层覆盖。解决方法是在el-dialog上设置modal-append-to-body='false'，这样弹框将不会被插入到body标签下，而是保持在组件的父元素层级，从而避免了被遮罩层覆盖的问题。

fixed导致子元素本该显示的el-dialog弹框被遮罩层覆盖的解决办法

最近由于项目需要给el-table固定表头，于是就给el-table-column添加了fixed属性，表头成功固定，但是el-dialog弹框却被覆盖了，呜呜呜~
在这里插入图片描述

解决办法：父元素设置成固定定位时，子元素弹出框设置:modal-append-to-body='false’即可
若el-dialog弹出框设置了modal-append-to-body=‘true’（默认）属性，它的遮罩层就会被插入到body标签下（即与组件所在的最外层div同一层级）
最后完美解决
在这里插入图片描述

unIqueGsl
关注
Vue项目element-ui弹窗组件el-dialog，阻止点击遮罩层关闭
m0_38109616的博客
12-01 2307
Vue项目element-ui弹窗组件el-dialog，阻止点击遮罩层关闭
position：fixed导致子元素本该显示的el-dialog弹框被遮罩层覆盖的解决办法
yh8899abc的博客
04-27 2975
最近vue项目中为了使header与sidebar部分固定不动，只有main主体部分内容滚动，于是给main部分加上了固定定位position：fixed，overhidden：scroll .app-main { height: 100%; position: fixed; overflow: scroll; } 导致main主体部分子元素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 的Dialog被蒙板遮住原因及解决办法
weixin_34239592的博客
07-06 1752
用 element-ui 时遇到一个问题，弹出的 dialog本来应该在半透明蒙板上层显示，但不知怎么跑到了蒙板下面，被遮住了。 查了一些资料，得知如果 Dialog 的外层布局的 position 值为 fixed, absolute, relative 三者之一时，就会出现被蒙板遮住的情况。 解决办法很简单，查看 element 的 官方文档 在 el-dialog 标签里添加下面两行代码的...
el-dialog被遮罩层遮挡
BangD的博客
11-01 628
后来我又把:modal-append-to-body="false"改成了append-to-body就可以了，开始我在标签中加:modal-append-to-body="false"，遮罩层是在下面了但是，对于页面中有的边框或者搜索框会在遮罩的上面，el-dialog被遮罩层遮挡（解决办法）title="确认退出？
Element-UI实现el-dialog弹框拖拽功能
觉醒法师的专栏
06-17 9123
在实际开发中，会发现很多系统中弹框是可以在浏览器可见区域自由拖拽的，这极大方便用户的操作。在查看Element-UI中弹框（el-dialog）组件的文档说明后，发现并未实现这一功能，不过也无须担心，vue中提供了Vue.directive钩子函数，可以从底层操作DOM来实现并升级弹框的拖拽功能。
父页面显示遮罩层弹出半透明状态的dialog
09-04
在网页设计中，创建一个父页面显示遮罩层并弹出半透明状态的dialog是常见的交互效果，这种设计可以提供用户友好的体验，使他们能够专注于当前操作而不会被其他页面元素分心。Dialog（对话框）通常用来展示重要的信息...
【Element UI】解决 el-dialog 弹框组件设置 custom-class 样式不生效问题
qq_45677671的博客
10-07 5824
解决饿了么组件库 el-dialog 弹框组件设置 custom-class 样式不生效问题
el-dialog 打开dialog弹框，鼠标点击事件无法执行
最新发布
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
09-03 495
摘要：针对奇安信浏览器下弹框遮挡底层操作的问题，通过分析发现是弹框遮罩层级过高导致。解决方案采用CSS的pointer-events属性控制事件穿透：弹框主体（header/body/footer）保持auto允许交互，遮罩层设为none使事件穿透。核心代码通过!important强制覆盖样式，既保留弹框拖拽功能，又确保底层地图可操作，完美兼容国产浏览器环境。（149字）
el-dialog固定头部与底部，中间内容滑动
weixin_69890748的博客
05-06 1897
el-dialog固定头部与底部，中间内容滑动
element-ui 遮罩层el-dialog 中间内容被被蒙板遮住 解决
AdleyTales的技术博客
11-19 8337
原因： Dialog 的外层布局的 position 值为 fixed, absolute, relative 三者之一时，就会出现被蒙板遮住的情况。 解决： // 在 el-dialog 标签里添加 :append-to-body="true" <!-- 编辑弹出框 --> <el-dialog title="添加用户" :visible.sync=&a
Jquery：如何让子窗口的div显示在父窗口之上
代码技巧
06-18 3373
leftiframe中的jQuery操作mainiframe的内容someID的内容
el-dialog窗口中绝对定位子元素被遮挡问题解决
hahahahha111的博客
01-21 2688
el-dialog窗口中绝对定位子元素被遮挡问题解决 1.背景：el-dialog中使用了表单，表单校验信息不采用显示在输入框下方的方式，而是自定义一个组件来显示在标签上方（类似el-poppver），其使用了绝对定位； 2.现象：第一行表单元素（两个输入框，标签位置为top），当校验信息(显示于标签之上)为换行显示时，好像被el-dialog__header遮挡了，不能显示完全，因此力求可以显示完整的方法； 3.探索之路：网上搜解决绝对定位div子元素被遮挡的方法，均是父元素层级太低或父元素未设置posi
layui 子页面写弹出框覆盖父页面，以及给弹框中的表单赋值
Start2019
06-03 2407
尝试使用下面3种方法解决，但是失败了，最后还是通过layui的弹出框解决的。 1、直接在子页面写弹框代码及弹框定位样式； 2、父页面放空div，覆盖整个父页面； 3、使用 $.load() 加载弹框内容
el-dialog被遮罩层遮挡（解决办法）
qq_40087327的博客
10-22 4069
el-dialog被遮罩层遮挡（解决办法） vue框架结构是左边菜单，右边根据菜单显示内容的，类似于若依管理端框架，el-dialog被遮罩层遮挡解决办法： :append-to-body="true" 设置了这个属性，el-dialog是插入在body上的，不会被这种左菜单右内容的这种框架结构影响 ...
解决Dialog模态弹出点击遮罩层窗口自动关闭
wd728的博客
09-21 2735
Dialog模态弹出点击遮罩层弹出窗口会消失 如果我们不希望自动消失，而是在点击弹出窗口的关闭按钮时才消失，需要设置下Dialog组件的“close-on-click-modal ”属性，默认为true,改为false即可。官方文档解释： <el-dialog :title=“提示” :visible.sync=“dialogVisible” @close=“closeDialog” :close-on-click-modal=“false”> ...
el-dialog弹框在遮罩层下
04-03
嗯，用户遇到了el-dialog弹框显示在遮罩层下方的问题，需要解决。首先，我应该回忆一下element-ui中el-dialog的z-index相关设置。根据之前的引用资料，遮罩层的z-index通常是2000，而弹框的z-index应该比遮罩层高...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值