element-ui中Dialog使用时整个页面被添加了遮罩层的问题(添加modal-append-to-body=“false“)

最新推荐文章于 2025-05-26 20:46:41 发布
最新推荐文章于 2025-05-26 20:46:41 发布
阅读量4.2k 收藏 5
点赞数
CC 4.0 BY-SA版权
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/chriscencen/article/details/110630080
本文介绍如何在使用Element-UI的Dialog组件时，调整对话框的遮罩效果，仅使对话框外的内容被遮罩，提高用户体验。

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

在使用element-ui中的dialog对话框时,我发现点击按钮让对话框显示时,它默认是给整个页面加上了遮罩层的效果,这个其实是不太友好的,我实际想看到的效果是对话框部分不需要遮罩,对话框以外的部分才需要加上遮罩.
在这里插入图片描述
后来研究了一下它的属性发现需要给它加上 modal-append-to-body=“false” 才能达到我想要的效果.
在这里插入图片描述

chriscencen
关注
Vue - ElementUI 模态框Dialog、Drawer抽屉框，将append-to-body设置为true后，使用deep覆盖样式失效解决办法（将弹框插入到body中样式覆盖失败）
资深程序员
03-20 4055
vue2，element-ui，el-drawer，el-dialog，抽屉弹框，对话框模态框，append-to-body，插入到body中无法使用deep覆盖样式，在elementui组件库中，使用el-drawer抽屉弹框组件，当设置append-to-body属性后，无法使用deep进行样式覆盖怎么办，关于vue+element中el-dialog设置append-to-body样式不生效问题，vue2elementUIel-dialog修改了body样式不生效问题解决方案，element组件
Vue.js前端框架教程16：Element UI的el-dialog组件
Cachel Wood的博客
01-11 665
点击按钮可以打开对话框，对话框标题为 “示例对话框”，宽度为页面宽度的 30%，内容为 “这是一个简单的示例对话框”。: 在对话框关闭前调用的函数，参数为关闭前的回调函数，可用于阻止对话框关闭。: 布尔值，设置点击对话框背景时是否关闭对话框。: 布尔值，设置关闭对话框时是否销毁对话框内容。: 布尔值，设置是否在对话框显示时才渲染内容。: 布尔值，设置对话框打开时是否聚焦到对话框。通常用于嵌套对话框时避免样式冲突。: 布尔值，设置点击遮罩层时是否关闭对话框。: 布尔值，设置是否在对话框显示时锁定滚动。
(Select)解决：Element-ui 中的 Select 组件用(深度)选择器修改默认样式不生效的问题及如何使用 popper-append-to-body=“false“ 属性
狮子座的男孩
05-05 1万+
1、存在修改默认样式不生效问题的展示： A、问题一：虽然通过深度选择器修改了下拉框的背景等样式问题却没有展示： B、问题二：渲染后的 dom 元素并不在 #app 元素内部： // 发现：修改下拉框默认属性而渲染的 dom 元素是与 #app 并列位于 body 中的，因此是没有办法通过深度选择器来定位该元素的； 2、用(深度)选择器设置属性不生效的原因： A、原因一：select-popper 元素渲染后会脱离 #app; 发现渲染后的 dom 元素不在 #app 元素内部, 应该是 el-selec
Element UI 对话框 (el-dialog) 的秘密武器：:append-to-body=“true“ 全解析 ✨
小丁的博客
05-26 1111
核心作用：将对话框DOM结构直接附加到<body>元素，解决显示层级问题。 效果对比： 默认情况：受父容器样式影响 启用后：独立显示，不受嵌套结构约束
去除弹窗遮罩层:modal-append-to-body=“false“
Lililiming_的博客
02-20 999
去除弹窗遮罩层:modal-append-to-body="false"
vue 使用Dialog对话框使用过程中出现灰色遮罩问题
qq_41451744的博客
08-27 2032
vue 使用Dialog对话框使用过程中出现灰色遮罩问题
el-select如何改变样式 （:popper-append-to-body=“false“）
Alone_Endeavor的博客
06-01 9516
popper-append-to-body是一个Popper.js库的选项，用于指定Popper元素是否应该附加到文档的body元素上。通过Element-ui的Select Attributes可发现，有这样一个属性 popper-append-to-body。在使用el-select的时候，其样式会按照Elementui自带的默认样式为基准；.el-select-dropdown__item:hover——hover时的样式。.el-select-dropdown__item——单个选项的样式修改。
【避坑指“难”】Element-ui中el-dialog组件显示时有蒙层（遮罩层）怎么破？
椰卤工程师的个人博客
07-06 4161
到底是什么问题？ 没错就是这样，就像上图一样，上传完图片需要预览时，图片被蒙层遮罩住了。 下面是整个组件的代码：图片上传、预览、删除，组件方法可以直接去Element-ui官方文档查看。 <template v-slot:img_upload> <el-upload action="#" list-type="picture-card" :limit="9" :auto
Element-UI中el-dialog使用遇到的坑：打开弹框再点击浏览器的上一个页面的按钮，弹框的遮罩层没有关闭
weixin_44370837的博客
04-12 8809
大家好，我是小梅，公众号：「小梅的前端之路」 原创作者。 作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。 重现步骤如下： 打开使用el-dialog编写的弹框 点击浏览器的回退按钮 现象：弹框的遮罩层没有关闭 解决办法： 根据官网文档可知，在弹框中添加如下代码即可解决 :modal-append-to-body = "false" 原因分析：官方文档的说明入下图 Element-ui中弹框的遮罩层由下面这行代码实现，具体的CSS在此就不写了。
解决Vue开发中对话框被遮罩层挡住的问题
01-19
在Vue的开发中，一旦我们用到对话框，经常出现的问题是对话框被遮罩层挡住，无论是Element-UI dialog还是bootstrap的Modal，如下图所示： 造成这个问题的原因是对话框组件的父元素的position有fixed或者relative...
element-ui中el-dialog遮罩+codemirror无智能提示
璐璐璐
08-24 1488
最近在使用elui的时候遇到一个问题 就是el-dialog使用的时候因为弹出的弹框里面加了codemirror编辑器 导致el-dialog中原本在弹框后面的遮罩变成在主体前面 类似于图上的情况 查询之后发现是需要写modal-append-to-body属性 发现这样写之后虽然遮罩正常了，但是编辑器的智能提示没有了 以为是编辑器的配置出现问题了，弄了好久 最后发现原来还是遮罩的原因 最后改为 :modal-append-to-body=“false” 就可以了 最后效果 顺便说一下怎么改变这个
ElementUI：遮罩层遮盖全屏的问题
weixin_38942919的博客
01-28 3791
问题描述： 在设置Dialog对话框的时候遮罩层覆盖全屏，期望实现的效果是对话框显示，对话框之外被遮罩层覆盖。 问题分析： ElementUI官方文档中对于append-to-body属性描述： Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true。 在嵌套Dialog场景中，将内层 Dialog 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Dialog 和遮罩层级关系的正确 问题解决： 在el-dialo
将el-dialog设置为全屏（ :fullscreen=“true“）后还是存在遮罩层和滚动条
weixin_60886885的博客
12-29 2273
解决：将el-dialog的margin设置为0即可。
element-ui 的Dialog被蒙板遮住原因及解决办法
OHRadiance的专栏
11-05 1289
传送门
element ui 弹出组件的遮罩层在弹出层的上面的解决方法:modal-append-to-body="false"
热门推荐
webZRH的博客
08-14 2万+
<el-dialog :visible.sync="dialogImg" :modal-append-to-body="false"> <img :src="dialogImageUrl" alt=""> </el-dialog> 运用element的Upload 上传组件预览图片会出现遮罩层在弹出层的上面在遮罩处添加:modal-append-to-bo...
vue+Element中append-to-body的使用
weixin_43626529的博客
10-28 7178
我们写项目的时候经常会遇到子组件被父组件覆盖的情况，这个时候在子组件的dialog上 就应该加上append-to-body属性
全屏模式下el-dialog的遮罩层bug问题
weixin_54820790的博客
05-14 671
全屏模式下el-dialog的遮罩层bug问题。
element-ui el-dialog中套el-dialog被遮罩遮盖的问题解决
qq_35919264的博客
07-16 2172
添加“:append-to-body” modal-append-to-body 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上 boolean — true append-to-body Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true boolean — false 你给他扔到body元素中就好了，毕竟之前是两个dialog嵌套嵌套在一起，用“append-to-body Dialog”扔到body中
关于element中el-dialog设置append-to-body样式不生效问题
m0_58361435的博客
11-24 3291
最近做一个嵌套的Dialog而且两个都同时设有append-to-body属性，这样我在下面修改样式就不生效，前端不就玩的个样式吗？如果样式都没用了，还做什么前端。那么其中最简单的一个办法就是把append-to-body属性给干掉，这样的话样式就生效了。
el-dialog 属性 append-to-body怎么使用
最新发布
07-18
我们被要求解释如何在 Element UI 的 el-dialog 中使用 append-to-body 属性。根据引用内容，append-to-body 属性用于控制对话框的 DOM 结构位置，这会影响对话框的定位和样式。 ### 核心知识点 1. **作用**：当 `...
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值