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

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

#html

本文介绍如何在使用Element-UI的Dialog组件时，调整对话框的遮罩效果，仅使对话框外的内容被遮罩，提高用户体验。

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

chriscencen
关注
Vue - ElementUI 模态框Dialog、Drawer抽屉框，将append-to-body设置为true后，使用deep覆盖样式失效解决办法（将弹框插入到body中样式覆盖失败）
🏆 前端领域优质创作者
03-20 4382
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 933
点击按钮可以打开对话框，对话框标题为 “示例对话框”，宽度为页面宽度的 30%，内容为 “这是一个简单的示例对话框”。: 在对话框关闭前调用的函数，参数为关闭前的回调函数，可用于阻止对话框关闭。: 布尔值，设置点击对话框背景时是否关闭对话框。: 布尔值，设置关闭对话框时是否销毁对话框内容。: 布尔值，设置是否在对话框显示时才渲染内容。: 布尔值，设置对话框打开时是否聚焦到对话框。通常用于嵌套对话框时避免样式冲突。: 布尔值，设置点击遮罩层时是否关闭对话框。: 布尔值，设置是否在对话框显示时锁定滚动。
element-ui el-dialog中套el-dialog被遮罩遮盖的问题解决
qq_35919264的博客
07-16 2193
添加“: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-ui嵌套弹框遮罩层解决
i_am_a_div的博客
09-13 811
element-ui嵌套弹框遮罩层解决
Element Plus 抽屉组件 append-to 属性深度解析
最新发布
gitblog_01033的博客
09-11 595
Element Plus 作为 Vue 3 生态中广受欢迎的 UI 组件库，其抽屉组件(el-drawer)在实现侧边栏功能时非常实用。本文将深入探讨该组件中 append-to 属性的使用技巧和实现原理，帮助开发者更好地控制抽屉的挂载位置。 ## 核心问题分析 抽屉组件默认采用 fixed 定位方式，这意味着它会相对于浏览器视口进行定位。这种设计虽然简单直接，但在某些复杂布局场景下可能不够灵...
去除弹窗遮罩层:modal-append-to-body=“false“
Lililiming_的博客
02-20 1054
去除弹窗遮罩层:modal-append-to-body="false"
(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
vue 使用Dialog对话框使用过程中出现灰色遮罩问题
qq_41451744的博客
08-27 2069
vue 使用Dialog对话框使用过程中出现灰色遮罩问题
el-select如何改变样式 （:popper-append-to-body=“false“）
Alone_Endeavor的博客
06-01 1万+
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——单个选项的样式修改。
浮层“隐身”之谜：el-dialog 的 append-to-body 属性，你用对了吗？
小丁的博客
07-14 1734
这篇文章深入解析了 Element UI 中 el-dialog 组件的 append-to-body 属性。该属性控制对话框是否直接渲染到 <body> 元素下，从而影响其层级和布局表现。当设置为 true 时，对话框不受父组件样式影响，确保最高层级显示；默认 false 则可能受父组件 z-index 和 overflow 限制。文章通过表格对比、流程图和时序图等方式，清晰展示了两种模式的区别，并解释了在何种场景下需要启用该属性。核心结论是：append-to-body 是解决浮层显示问题的
ElementUI：遮罩层遮盖全屏的问题
weixin_38942919的博客
01-28 3889
问题描述： 在设置Dialog对话框的时候遮罩层覆盖全屏，期望实现的效果是对话框显示，对话框之外被遮罩层覆盖。 问题分析： ElementUI官方文档中对于append-to-body属性描述： Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true。 在嵌套Dialog场景中，将内层 Dialog 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Dialog 和遮罩层级关系的正确 问题解决： 在el-dialo
Element-UI中el-dialog使用遇到的坑：打开弹框再点击浏览器的上一个页面的按钮，弹框的遮罩层没有关闭
weixin_44370837的博客
04-12 8929
大家好，我是小梅，公众号：「小梅的前端之路」 原创作者。 作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。 重现步骤如下： 打开使用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组件显示时有蒙层（遮罩层）怎么破？
椰卤工程师的个人博客
07-06 4222
到底是什么问题？ 没错就是这样，就像上图一样，上传完图片需要预览时，图片被蒙层遮罩住了。 下面是整个组件的代码：图片上传、预览、删除，组件方法可以直接去Element-ui官方文档查看。 <template v-slot:img_upload> <el-upload action="#" list-type="picture-card" :limit="9" :auto
将el-dialog设置为全屏（ :fullscreen=“true“）后还是存在遮罩层和滚动条
weixin_60886885的博客
12-29 2380
解决：将el-dialog的margin设置为0即可。
element-ui 的Dialog被蒙板遮住原因及解决办法
OHRadiance的专栏
11-05 1301
传送门
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 7327
我们写项目的时候经常会遇到子组件被父组件覆盖的情况，这个时候在子组件的dialog上 就应该加上append-to-body属性
全屏模式下el-dialog的遮罩层bug问题
weixin_54820790的博客
05-14 801
全屏模式下el-dialog的遮罩层bug问题。
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、付费专栏及课程。

余额充值