vue项目中element-ui对话框el-dialog嵌套显示时多了一个遮罩层解决办法

最新推荐文章于 2025-04-02 14:33:26 发布
最新推荐文章于 2025-04-02 14:33:26 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： vue工作经验总结 文章标签： ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sjp991012/article/details/134535228
版权
文章讲述了如何在Vue组件中处理嵌套对话框时出现的遮罩问题，通过给el-dialog添加`append-to-body`属性并设置`noBorder`类，解决了对话框显示和布局问题。

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

在对话框里又嵌套了一个对话框展示时，多了一个遮罩层，如下图所示：

在这里插入图片描述

解决办法如下：

在这里插入图片描述

给对话框添加append-to-body 属性，参考以下代码：

 <el-dialog :visible.sync="dialogVisible" append-to-body class="noBorder">
   <img width="100%" :src="dialogImageUrl" alt="">
 </el-dialog>

修改后的示意图如下：

在这里插入图片描述

Vue.js前端框架教程16：Element UI的el-dialog组件
Cachel Wood的博客
01-11 577
点击按钮可以打开对话框，对话框标题为 “示例对话框”，宽度为页面宽度的 30%，内容为 “这是一个简单的示例对话框”。: 在对话框关闭前调用的函数，参数为关闭前的回调函数，可用于阻止对话框关闭。: 布尔值，设置点击对话框背景时是否关闭对话框。: 布尔值，设置关闭对话框时是否销毁对话框内容。: 布尔值，设置是否在对话框显示时才渲染内容。: 布尔值，设置对话框打开时是否聚焦到对话框。通常用于嵌套对话框时避免样式冲突。: 布尔值，设置点击遮罩层时是否关闭对话框。: 布尔值，设置是否在对话框显示时锁定滚动。
elementUI中对话框el-dialog遮罩层问题（遮罩层在内容上面）
weixin_61397543的博客
11-09 1558
【代码】elementUI中对话框el-dialog遮罩层问题（遮罩层在内容上面）
关于el-dialog上额外多了一层遮罩层
weixin_47175934的博客
11-09 1842
关于el-dialog上额外多了一层遮罩层
el-dialog实现遮罩层后面的内容也能点击
最新发布
maohangfei.cn
04-02 353
el-dialog实现遮罩层后面的内容也能点击
el-dialog添加loading遮罩
QAWSASD的博客
03-26 2758
el-dialog添加loading遮罩。
e-dialog出现额外多了一层遮罩
goodnight2333333的博客
01-11 783
append-to-body：Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true。先看一下我的问题，使用e-dialog对话框，额外多了一层遮罩，点击一下才能去除遮罩层；在el-dialog上面加上：append-to-body就可以啦！PS：默认是false哦！
【bug】关于el-dialog上额外多了一层遮罩层
m0_66340074的博客
12-28 5281
2.如果是el-dialog里又嵌套了一层el-dialog弹框，一定要把内层的dialog加上append-to-body="true",插入至 body 元素，保证层级的正确(elementUI的组件内有更多解释)后来听说用absolute绝对定位也会出现这样的问题，我一看自己的代码，原来是给最外面的div设定位为fixed了，无论是绝对定位还是固定定位，都会使元素脱离文档流，删掉换个布局去实现就好了。
el-dialog遮罩层
夏夏
06-30 4522
1.不需要遮罩层设置如下属性： <el-dialog :modal="false"></el-dialog> 2.默认点击空白处对话框会关闭，如果需要点击空白不关闭时，设置如下属性即可： <el-dialog :close-on-click-modal="false"></el-dialog> 后期会一直更新，对于用到的都会一点点补充在里面 ...
vue element-ui 使用el-tooltip内部嵌套其他element-ui组件时报错处理方案
u013185395的博客
10-31 958
vue element-ui 使用el-tooltip内部嵌套其他element-ui组件时报错处理方案
Vue中使用element-ui的el-dialog 拖动对话框
05-30
要在Vue中使用element-ui的el-dialog对话框并实现拖动功能，可以使用vue-draggable-resizable插件来实现。 1. 安装插件 使用npm或者yarn进行安装。 ``` npm install vue-draggable-resizable --save ``` 或者 `...
vue2.0+elementui el-dialog对话框去掉覆盖层后解决无法操作底层的问题
qq_45927262的博客
02-11 319
element-dialog对话框去掉覆盖层后解决无法操作底层的按钮的问题_element dialog下面。element-dialog对话框去掉覆盖层后解决无法操作底层的按钮的问题_element dialog下面-优快云博客。对去掉覆盖层之后，发现无法操作底层页面。设置css 样式来解决。给对话框设置一个唯一的 ID，仅对当前对话框进行相关处理。
使用Vue3 + ElementPlus，让抽屉（el-drawer）显示在对话框（el-dialog）中
qq_48651377的博客
05-11 2000
定位是相对于 static（position默认值）定位以外的第一个父元素进行定位，如果不存在已定位的父元素，则相对于body元素。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。定位是相对于浏览器视口来定位的，也就是说，元素的位置不会随着页面滚动而改变，始终会固定在视口的某个位置。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。解决办法：将抽屉的遮罩定位到对话框上，即。属性自定义遮罩的css样式，
el-dialog被遮罩层遮挡
BangD的博客
11-01 509
后来我又把:modal-append-to-body="false"改成了append-to-body就可以了，开始我在标签中加:modal-append-to-body="false"，遮罩层是在下面了但是，对于页面中有的边框或者搜索框会在遮罩的上面，el-dialog被遮罩层遮挡（解决办法）title="确认退出？
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遮罩层遮挡问题
changyana的博客
03-11 1028
由于我是el-dialog里边又嵌套了一个el-dialog，所以当出现两个el-dialog时，都会被遮罩层遮挡。
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
李十三的博客
09-13 2171
参考我的这篇文章,但是在后面我发现只要是会生成v-model元素的饿了么组件,在使用的过程中都可能出现整个页面被遮罩层挡住的情况,解决方法其实都一样.element-ui框架的el-dialog弹出框被遮罩层遮挡问题_前端李十三的博客-优快云博客。element-ui框架的el-dialog弹出框被遮罩层遮挡问题_前端李十三的博客-优快云博客。可以发现el-dialog 组件显示的时候被遮罩层挡住了。可以发现el-dialog 组件显示的时候被遮罩层挡住了。
el-dialog遮罩层的问题
simple_smile1208的博客
08-30 8749
在一个el-dialog中点击再出现一个el-dialog时会出现一个遮罩层的问题 解决方法：添加:append-to-body="true"属性
element-ui框架的el-dialog弹出框被遮罩层遮挡问题
李十三的博客
06-12 1323
可以发现el-dialog 组件显示的时候被遮罩层挡住了。
el-dialog打开默认显示遮罩层
weixin_44448044的博客
07-09 569
dialog加上**:append-to-body=“true”**,使插入至 body 元素即可，遮罩层会显示在弹框下层。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值