element ui使用Dialog 对话框关闭遮罩层 class=v-modal元素

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

#ui #javascript #vue.js

本文介绍了如何在前端开发中关闭遮罩层，重点讲解了`modal`和`modal-append-to-body`两个属性的用法。`modal=false`用于关闭遮罩层，而`modal-append-to-body=false`则允许将遮罩层插入到当前元素下，而非默认的body元素。示例代码展示了在el-dialog组件中的具体应用，这对于自定义对话框的样式和交互具有重要意义。

关闭遮罩层使用属性 :modal=“false”
是否将遮罩层插入至 body 元素上，默认为true。:modal-append-to-body=“false” 可以将插入body元素上的遮罩层插入到当前元素下


<el-dialog :visible.sync="show_form" title="添加活动" width="90%" :lock-scroll="false" :modal="false" @close="closeDialog">

</el-dialog>

官方文档解释：
在这里插入图片描述

Vue项目element-ui弹窗组件el-dialog，阻止点击遮罩层关闭
m0_38109616的博客
12-01 2305
Vue项目element-ui弹窗组件el-dialog，阻止点击遮罩层关闭
element-plus dialog对话框去掉覆盖层、并可操作底层的按钮
weixin_44442674的博客
03-26 1538
加载cesium时，地球出现后不能操作，刚开始以为cesium引用出现问题，控制台也没报错，最后发现时引用的element-plus抽屉组件存在遮罩层的原因。由于抽屉组件存在遮罩层，虽然设置:modal="false"不显示遮罩层，但是遮罩层只是变为透明，但是仍然存在，点击事件失效。查看元素，遮罩层没有类名，添加自定义类名 modal-class="drawer"，网上找的css样式应用后不起作用。最后发现是因为局部样式造成的样式不起作用，使用样式穿透，问题解决。
vue el-dialog
Yueqin0512的博客
09-22 803
<el-dialog title="Change Passward" :visible.sync="editDialogFormVisible" width="30%" :append-to-body="true" :close-on-click-modal="false"> <el-form ref="changePassward" :model="changePass...
Element UI对话框与抽屉：模态框交互设计最佳实践
最新发布
gitblog_00734的博客
09-24 420
在现代Web应用开发中，模态框（Modal）是不可或缺的交互组件，用于聚焦用户注意力、展示关键信息或获取用户输入。Element UI作为基于Vue.js 2.0的UI组件库，提供了两种常用的模态框组件：对话框（Dialog）和抽屉（Drawer）。本文将深入探讨这两种组件的设计理念、使用场景、功能特性以及最佳实践，帮助开发者在实际项目中做出合理选择并实现出色的用户体验。 ## 组件概述与核心源...
【工作小tip】遮罩层遮不住底部组件
fangyuan__的博客
07-24 1367
遮罩层遮不住底部组件
Element-UI中el-dialog使用遇到的坑：打开弹框再点击浏览器的上一个页面的按钮，弹框的遮罩层没有关闭
weixin_44370837的博客
04-12 8919
大家好，我是小梅，公众号：「小梅的前端之路」 原创作者。 作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。 重现步骤如下： 打开使用el-dialog编写的弹框 点击浏览器的回退按钮 现象：弹框的遮罩层没有关闭 解决办法： 根据官网文档可知，在弹框中添加如下代码即可解决 :modal-append-to-body = "false" 原因分析：官方文档的说明入下图 Element-ui中弹框的遮罩层由下面这行代码实现，具体的CSS在此就不写了。
Vue 弹窗黑色遮罩 class v-modal
weixin_44031940的博客
02-03 1398
Vue 多层弹窗黑色遮罩 class v-modal
Element-UI 组件MessageBox 弹框 关闭遮罩层
weixin_43896125的博客
11-04 3572
关闭遮罩层方法
Element UI 对话框固定宽度 + 遮罩层深度定制方案
qq_46154326的博客
05-26 699
本文介绍了Element UI对话框的固定宽度与遮罩层深度定制方案。通过custom-class和modal属性实现样式隔离，使用CSS穿透技术精准控制对话框宽度和遮罩层透明度。文章详细解析了配置参数，提供完整代码示例，并针对常见问题给出解决方案。方案支持动态控制遮罩行为，确保仅影响目标对话框而不干扰其他弹窗，适用于需要定制化对话框样式的场景。
element ui里dialog关闭后清除验证条件方法
08-27
Element UI 中 Dialog 关闭后清除验证条件方法 Element UI 是一个基于 Vue.js 的桌面端组件库，提供了许多功能强大且易用的组件，其中 Dialog 组件是其中一个非常常用的组件。然而，在使用 Dialog 组件时，经常会...
Element Dialog对话框的使用示例
10-15
Element Dialog对话框是Element UI库中的一个核心组件，用于创建各种对话框，提供了一种在用户界面中展示信息、确认操作或进行交互的有效方式。它提供了丰富的定制化选项，可以轻松地集成到Vue.js项目中。 ### 基本...
Element UI：Dialog对话框详解与示例
"Element Dialog对话框的使用示例，展示了如何在Vue应用中利用Element UI库创建和定制对话框组件，包括基本用法和自定义内容的实现。" Element UI 是一套基于 Vue.js 的开源 UI 组件库，它提供了一系列丰富、美观的...
element-dialog对话框去掉覆盖层、并可操作底层的按钮
c601757850的博客
06-02 3944
dialog对话框去掉覆盖层、并可操作底层的按钮
ElmentUI禁止点击遮罩层关闭el-dialog弹窗、对话框滑动不消失功能
Lydia
08-05 2334
ElmentUI全局禁止点击遮罩层关闭el-dialog弹窗、对话框不消失功能、显示弹框时，设置页面滚动条仍然可以滚动。
el-dialog取消遮罩层，支持拖拽，底部内容可操作
Juihui822的博客
08-19 1129
注意：样式的 my-dialog-class需要与属性 modal-class绑定的值保持一致....操作好上面两步，应该就实现功能啦~
vue2.0+elementui el-dialog对话框去掉覆盖层后解决无法操作底层的问题
qq_45927262的博客
02-11 470
element-dialog对话框去掉覆盖层后解决无法操作底层的按钮的问题_element dialog下面。element-dialog对话框去掉覆盖层后解决无法操作底层的按钮的问题_element dialog下面-优快云博客。对去掉覆盖层之后，发现无法操作底层页面。设置css 样式来解决。给对话框设置一个唯一的 ID，仅对当前对话框进行相关处理。
elementUI的消息弹窗组件手动关闭和遮罩层关闭问题
HDdgut的博客
10-13 3047
modal-append-to-body：遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上。append-to-body：Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true。可能是两个dialog嵌套问题，将append-to-body 设置为true。2.移除掉DOM(慎用)
element自定义组件实现v-mode效果
czh4869623的专栏
11-22 1077
element自定义组件实现v-mode效果 element自定义组件实现v-mode效果
vue3+element-plus中dialog对话框组件去掉遮罩层后可以操作底层页面，以及弹窗嵌套弹窗如何去掉遮罩层且可以操作底层页面
liuzaixi的博客
03-18 4570
三、如果是弹窗嵌套弹窗，以上方法可能不会去掉遮罩层，这时就需要添加官网给出的另一个属性：append-to-body，具体解释可以查看官网。是自定义类名，和下面代码中的类名相同即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值