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

最新推荐文章于 2024-07-23 08:43:21 发布
最新推荐文章于 2024-07-23 08:43:21 发布
阅读量778 收藏
点赞数 2
文章标签： elementui vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sky8880/article/details/127316091
版权

Why Why Why ！！！😵

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

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

解决👇👇👇

在标签上添加

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

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

skyseey
关注
Vue项目element-ui弹窗组件el-dialog，阻止点击遮罩层关闭
m0_38109616的博客
12-01 1934
Vue项目element-ui弹窗组件el-dialog，阻止点击遮罩层关闭
el-dialog被遮罩层遮挡
BangD的博客
11-01 392
后来我又把:modal-append-to-body="false"改成了append-to-body就可以了，开始我在标签中加:modal-append-to-body="false"，遮罩层是在下面了但是，对于页面中有的边框或者搜索框会在遮罩的上面，el-dialog被遮罩层遮挡（解决办法）title="确认退出？
【前端】解决element-ui两层dialog嵌套，遮罩层消失的问题。
2301_76933862的博客
07-02 854
总觉得element-ui dialog的遮罩层逻辑有点晦涩，当一个dialog内嵌另一个dialog时，它的遮罩层却始终只有一个，也就是下方class="v-modal"的div。但是，当两层dialog不是直接父子关系, 你可能会碰到关闭dialog2时，回到dialog1后，遮罩层消失的问题。回到dialog1时， 手动判断 v-modal遮罩层是否存在，没有则添加。使用ant design vue的modal时， 似乎没有碰到类似问题。可以看到， v-modal的层级总是比dialog低一层。
elementui 点击按钮添加遮罩
最新发布
weixin_42921879的博客
07-23 383
elementui 点击按钮添加遮罩
element-ui框架的el-dialog弹出框被遮罩层挡住了
热门推荐
知行合一，跬步致远
07-02 7万+
如图： 解决办法 在el-dialog标签里添加 :modal-append-to-body='false' 实现效果： 问题解析 先来看看element-ui官网提供的属性说明文档 文档解释：翻译成大白话就是，若el-dialog弹出框设置了modal-append-to-body='true'（默认）属性，它的遮罩层就会被插入到body标签下（即与组件所在的最外层d...
element 的dialog弹出会被遮住，如何解决？
Sicily_winner的博客
11-23 761
场景图： 解决办法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嵌套问
抽屉（el-drawer）里面嵌套弹出框（el-dialog）出现遮挡弹框问题
future_1_的博客
12-01 2155
抽屉（el-drawer）里面嵌套弹出框（el-dialog）出现遮挡弹框问题
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
李十三的博客
09-13 1915
参考我的这篇文章,但是在后面我发现只要是会生成v-model元素的饿了么组件,在使用的过程中都可能出现整个页面被遮罩层挡住的情况,解决方法其实都一样.element-ui框架的el-dialog弹出框被遮罩层遮挡问题_前端李十三的博客-CSDN博客。element-ui框架的el-dialog弹出框被遮罩层遮挡问题_前端李十三的博客-CSDN博客。可以发现el-dialog 组件显示的时候被遮罩层挡住了。可以发现el-dialog 组件显示的时候被遮罩层挡住了。
Vue ElementUI dialog弹出框被遮罩层盖住
LJJONESEED的博客
12-09 882
原因是dialog 里面 套了一个dialog ，需要在里面的dialog 添加一个属性 就好了 <el-dialog :append-to-body="true" >
LuckySheet右键菜单在el-element ui 的el-dialog组件被模式框覆盖问题
何鹏飞的博客
04-26 2057
LuckySheet右键菜单在el-element ui 的el-dialog组件被模式框覆盖问题 1.重载Luckysheet右键菜单样式 在渲染Lucksheet表格的页面引入CSS样式，如下 .luckysheet-cols-menu { z-index: 9004; } 完美解决
elementui更改el-dialog关闭按钮的图标d的示例代码
10-15
在Element UI框架中，`el-dialog` 是一个用于创建弹出式对话框的组件，它在用户界面中常用于显示重要信息或者进行确认操作。在某些设计需求下，可能需要自定义`el-dialog`的关闭按钮图标以符合特定的品牌风格或者...
vue+elementUI：el-dialog弹出框被遮罩层覆盖及关闭后数据没有清空
Maanqi_1214的博客
03-22 2112
1.el-dialog弹出框被遮罩层覆盖 解决方法：在el-dialog标签里添加 :modal-append-to-body='false’ <el-dialog id="forget-pwd" title="重置密码" :visible.sync="fpwdVisible" width="80%" destroy-on-close :modal-append-to-body="false"> 官网文档中提到：modal-append-to-body决定了遮罩层是否插入至 body 元素上
ElementUI：将el-dialog对话框封装成组件
weixin_54362826的博客
07-08 868
用 watch 监视 props 来的父组件的数据
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和element UI中对话框的遮罩层消失
浮生离梦的博客
08-09 8211
解决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 4996
Element ui中弹出框、Select 选择器等等弹出被遮盖的问题处理方法 这种问题一般出现在有多个弹出框、弹出框上有select选择器这两种情况。两种情况不同的处理方式如下： 情况A：有多个弹出框，你想要的效果可能是 页面->弹出框A->弹出框B，但是实际上出现的是 页面->弹出框B->弹出框A 如图所示。图是在网上找的 遇到这种情况不要慌，可以在el-dialog标签里添加 : modal-append-to-body=‘false’ 参数：modal-append-to-b
解决 el-dialog 偶现遮罩层问题
多多踩坑
12-30 1414
项目：element + vue 测试浏览器：IE 下图为测试发来的截图，使用 IE 浏览器会偶现打开 dialog 后弹出全局遮罩层，导致表单无法操作 解决：给 dialog 加属性 ---:modal-append-to-body = "false"
解决vue和el-dialog的遮罩层消失
子非渔
11-04 5229
解决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弹框关闭
07-29
el-dialog弹框关闭的方法是通过设置centerDialogVisible属性为false来实现的。在代码中，可以看到el-dialog组件的visible属性与centerDialogVisible进行了双向绑定，当centerDialogVisible为false时，el-dialog弹框会关闭。在cancel方法中，通过this.$refs.video.pause()来关闭视频播放。所以，当点击取消按钮或确定按钮时，centerDialogVisible会被设置为false，从而关闭el-dialog弹框。 #### 引用[.reference_title] - *1* [使用el-dialog遇到的问题如何关闭弹窗前调用方法](https://blog.csdn.net/qq_37544675/article/details/123991474)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值