去除弹窗遮罩层:modal-append-to-body=“false“

最新推荐文章于 2023-11-24 10:39:33 发布
原创 最新推荐文章于 2023-11-24 10:39:33 发布 · 997 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #开发语言

文章介绍了在遇到弹窗显示时出现额外遮罩层导致无法正常操作的问题，提供了一个简单的解决方案，即向弹窗组件添加特定代码行，可以有效地去除多余的遮罩，确保弹窗功能正常运行。

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

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

弹窗多了一层遮罩层，出不来，只需要给弹窗组件添加这一行代码，即可实现。

Lililiming_
关注
关于boostrap的关闭modal时关闭遮罩层问题解决方案 （（前端框架）bootstrap使用入坑记）
weixin_42171955的博客
07-18 2150
模态框使用入坑 这个问题困扰了我很久，百度百了一大圈也没找到合适的解决方案 下面是我自己的解决方案： 模态框代码 X关闭按钮的代码 <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">&times;</span> </button...
【避坑指“难”】Element-ui中el-dialog组件显示时有蒙层（遮罩层）怎么破？
椰卤工程师的个人博客
07-06 4156
到底是什么问题？ 没错就是这样，就像上图一样，上传完图片需要预览时，图片被蒙层遮罩住了。 下面是整个组件的代码：图片上传、预览、删除，组件方法可以直接去Element-ui官方文档查看。 <template v-slot:img_upload> <el-upload action="#" list-type="picture-card" :limit="9" :auto
modal 移除遮盖层
weixin_30530939的博客
02-28 867
弹框关闭时 移除遮盖层 $("#modal").bind('hide.bs.modal',function(){ $(".modal-backdrop").remove(); }) 永久移除遮盖层:https://www.cnblogs.com/G921123/p/10387172.html 转载于:https://www.c...
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...
终于搞懂了el-dialog属性modal-append-to-body,append-to-body的作用【图解】
灰的博客
10-18 1万+
最后说重点，为了避免出现遮罩层在最上面挡住了显示层（可能在谷歌浏览没问题，在IE浏览器就会有这个问题），以及被其他定位元素挡住（显示层全屏的时候）比如vue-element-admin左边的菜单和上面的头）(这个问题只有IE浏览器才会出现，而且是每次登录进来才会有这个问题，刷新一下又好了)。通过加append-to-body属性解决以上所有问题 ...
element-ui中Dialog使用时整个页面被添加了遮罩层的问题(添加modal-append-to-body=“false“)
chriscencen的博客
12-04 4238
在使用element-ui中的dialog对话框时,我发现点击按钮让对话框显示时,它默认是给整个页面加上了遮罩层的效果,这个其实是不太友好的,我实际想看到的效果是对话框部分不需要遮罩,对话框以外的部分才需要加上遮罩. 后来研究了一下它的属性发现需要给它加上 modal-append-to-body=“false” 才能达到我想要的效果. ...
element取消弹窗遮罩层
07-28
要取消Element UI的弹窗遮罩层，可以使用`modal`属性并将其绑定为`false`。同时，确保`append-to-body`属性设置为`true`。这样，遮罩层就会被移除。例如： ```html <el-dialog :modal="false" append-to-body="true...
解决Vue开发中对话框被遮罩层挡住的问题
10-17
在使用Element UI的Dialog组件时，只需添加一个属性：modal-append-to-body="false"。这个属性会将对话框组件添加到body元素中，而非其父元素，从而绕过父元素的定位属性对对话框层级的影响。 ```html <el-dialog :...
elementUI 源码-打造自己的组件库，系列四：Dialog组件(原创)
m13837120071的博客
08-07 1938
来吧继续一起阅读组件源码，dialog组件安排上。个人觉得dialog组件的难点在于弹出框的流程，特别是层级的处理。 当然其他小的知识点也是不少的，这就是阅读源码的小快乐吧
ry-ui.js解读和定制
m0_54938705的博客
06-01 2957
若依系统的前端操作大部分储存在/ruoyi-admin/src/main/resources/static/ruoyi/js/ry-ui.js中。 本文对其中的各方法进行了一些备注，新增了几个方法。 有一些console.log输出的部分已经被注释掉，根据需要加回来查看可以方便理解。 js文件和配套的html如下： /** * 通用js方法封装处理 * Copyright (c) 2019 ruoyi */ // 当前table相关信息 //把table的数据取出来就在这里，table.set找到t
vue-append:vue-append，类似于v-html指令，但可以调用javascript函数
05-25
附加值 vue-append，类似于v-html指令，但可以调用javascript函数 安装 npm install vue-append --save # or yarn add vue-append ES6模块 通过npm作为vue-append可用。 import VueAppend from 'vue-append' Vue . use ( VueAppend ) 普通JS var VueAppend = require ( 'vue-append' ) Vue . use ( VueAppend ) 直接包含 您也可以直接在[removed]标记中添加它。 它将自动安装自身，并添加一个全局VueAppend 。 事件 附加的 如果html append，脚本已下载且没有抛出错误，则将触发appended事件。 附加器 如果在添加html时抛出错误，则将触发a
el-select如何改变样式 （:popper-append-to-body=“false“）
Alone_Endeavor的博客
06-01 9478
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——单个选项的样式修改。
modal 永久移除遮盖层
weixin_30802273的博客
02-16 361
样式中直接加入: .modal-backdrop { opacity: 0 !important; filter: alpha(opacity=0) !important;} 转载于:https://www.cnblogs.com/G921123/p/10387172.html
(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中el-dialog设置append-to-body样式不生效问题
最新发布
m0_58361435的博客
11-24 3273
最近做一个嵌套的Dialog而且两个都同时设有append-to-body属性，这样我在下面修改样式就不生效，前端不就玩的个样式吗？如果样式都没用了，还做什么前端。那么其中最简单的一个办法就是把append-to-body属性给干掉，这样的话样式就生效了。
append-to-body属性导致dialog样式失效
qq_40084554的博客
12-21 2698
append-to-body属性导致dialog样式失效
Ant Design of Vue去掉加载遮罩
qq_38810813的博客
07-13 2006
.ant-spin-container::after { background: transparent!important; //这个比较重要 这个就是决定颜色的 } .ant-spin-blur { //下面这些就是一些辅助属性 比如透明度 opacity: 1!important; clear:none!important; overflow: auto!important; } ...
el-dialog嵌套遇到的问题
梅花寺
05-25 4995
前言 最近在弄PC端的管理平台，然后使用的是vue + elementUI。今天把遇到的问题总结下，正所谓，好记性不如烂笔头。 el-dialog嵌套 我们的业务需求需要嵌套dialog，正常打开第一个dialog是没有没问题的。 页面有蒙层，然后内容区域高亮 如下图 但是打开嵌套的dialog后蒙层盖住了整个页面，导致内容区域也被盖住了。 然后我去查看文档，查看页面dom结构就知道大致原因了。 这是因为dialog的蒙层默认都是插入到body的，然后它的z-index是动态生成，默认是2000，内容区
Element-UI中el-dialog使用遇到的坑：打开弹框再点击浏览器的上一个页面的按钮，弹框的遮罩层没有关闭
weixin_44370837的博客
04-12 8796
大家好，我是小梅，公众号：「小梅的前端之路」 原创作者。 作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。 重现步骤如下： 打开使用el-dialog编写的弹框 点击浏览器的回退按钮 现象：弹框的遮罩层没有关闭 解决办法： 根据官网文档可知，在弹框中添加如下代码即可解决 :modal-append-to-body = "false" 原因分析：官方文档的说明入下图 Element-ui中弹框的遮罩层由下面这行代码实现，具体的CSS在此就不写了。
<el-dialog ref="hussar_40Ref" @opened="hussar_40OpenedDialog" :visible.sync="hussar_40Show" :show-close="hussar_40ShowClose" :modal="hussar_40IsModal" :modal-append-to-body=true :append-to-body=true :close-on-click-modal="hussar_40IsClickClose" top="0" :class="{'BbcxSjccb_hussar_40': true, 'lcdp_axe':true, 'jxd_additional': true, 'BbcxSjccb': true}" class="hussar_40 jxd_ins_elDialog default">
07-20
这段代码是一个el-dialog组件的定义。这个组件具有以下属性和事件： - ref: "hussar_40Ref"，用来在组件中引用el-dialog实例。 - @opened: "hussar_40OpenedDialog"，当el-dialog被打开时触发的事件。 - :visible.sync: "hussar_40Show"，控制el-dialog的可见性，使用.sync修饰符可以实现双向绑定。 - :show-close: "hussar_40ShowClose"，控制是否显示关闭按钮。 - :modal: "hussar_40IsModal"，控制是否启用模态框。 - :modal-append-to-body: true，将模态框附加到body元素上。 - :append-to-body: true，将el-dialog组件附加到body元素上。 - :close-on-click-modal: "hussar_40IsClickClose"，控制点击模态框是否关闭el-dialog。 - top: "0"，设置el-dialog组件的顶部偏移值。 - :class="{'BbcxSjccb_hussar_40': true, 'lcdp_axe':true, 'jxd_additional': true, 'BbcxSjccb': true}"，为el-dialog添加多个class样式。 总体来说，这段代码是定义了一个具有一些属性和事件的el-dialog组件，并指定了一些样式和行为。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值