el-dialog 点遮罩层不关闭

于 2024-09-04 10:06:17 发布
阅读量197 收藏
点赞数 2
文章标签： vue.js elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16795789/article/details/141885801
版权

 Element UI 的 el-dialog 组件时，默认情况下，如果用户点击对话框外部的遮罩层，窗口会关闭。不过，你可以通过设置 :close-on-click-modal 属性为 false 来禁用这种行为，从而使点击遮罩层不会关闭对话框。

反转'
关注
Vue项目element-ui弹窗组件el-dialog，阻止点击遮罩层关闭
m0_38109616的博客
12-01 1935
Vue项目element-ui弹窗组件el-dialog，阻止点击遮罩层关闭
Vue项目element-ui弹窗组件el-dialog、el-drawer，阻止点击遮罩层关闭
金蕊泛流霞
09-26 3934
我们只需要设置这两个 append-to-body :close-on-click-modal="false" 属性。
el-dialog 组件蒙层把弹框给遮住问题处理
weixin_43837268的博客
05-15 2194
z-index的设置没有问题，但z-index值大的图层反而显示在了下面。从上面两个截图可以看出，遮罩层是插入到body元素上的，而弹框却是在层级比较深的组件中，所以考虑到是受父元素影响了。审查元素得知，在弹框的父元素中，有对z-index的设置，且值小于2042。从图中可以看出，element-ui对弹框的处理，默认把遮罩层插入至了body元素上，而dialog自身没有插入至body元素。设置modal-append-to-body为false，将遮罩层插入至dialog的父元素上，弹框显示正常。
【vue 】element配置全局或单个Dialog点击遮罩不关闭
向着光芒的女孩
02-10 4481
在很多编辑信息弹框，尤其后台管理系统，如果一点击遮罩关闭弹窗，再次点开弹窗又做了重置表单的操作会导致用户操作数据丢失，可以设置点击遮罩不关闭弹窗。
el-dialog 点击遮罩层就不关闭
2201_75410538的博客
03-06 509
【代码】el-dialog 点击遮罩层就不关闭。
Element-UI中el-dialog使用遇到的坑：打开弹框再点击浏览器的上一个页面的按钮，弹框的遮罩层没有关闭
weixin_44370837的博客
04-12 8411
大家好，我是小梅，公众号：「小梅的前端之路」 原创作者。 作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。 重现步骤如下： 打开使用el-dialog编写的弹框 点击浏览器的回退按钮 现象：弹框的遮罩层没有关闭 解决办法： 根据官网文档可知，在弹框中添加如下代码即可解决 :modal-append-to-body = "false" 原因分析：官方文档的说明入下图 Element-ui中弹框的遮罩层由下面这行代码实现，具体的CSS在此就不写了。
Element-UI中el-dialog打开弹框再点击浏览器的上一个页面的按钮，弹框的遮罩层没有关闭
2301_76707317的博客
09-27 279
根据官网文档可知，在弹框中添加如下代码即可解决。
el-dialog点击遮罩层不关闭弹窗
lighting0_0的博客
11-22 3641
原文链接： https://blog.csdn.net/qq_44711316/article/details/120968545?ops_request_misc=&request_id=&biz_id=102&utm_term=element%20dialog%E7%82%B9%E5%87%BB%E9%81%AE%E7%BD%A9%E5%B1%82%E4%B8%8D%E5%85%B3%E9%97%AD%E5%BC%B9%E7%AA%97%20%E5%B1%80%E9%83%A8%
vue 子组件 el-dialog弹框点击旁边的遮罩层无法关闭
weixin_45060105的博客
10-09 792
问题：点击el-dialog弹框旁边的遮罩层无法关闭弹框的 原因：style里的样式影响 解决方案：去掉样式
vue3中Element-plus全局配置Dialog遮罩层点击不关闭
weixin_50478033的博客
04-25 1596
vue3中Element-plus全局配置Dialog遮罩层点击不关闭
el-dialog点击遮罩层关闭
08-02
在el-dialog组件中，可以通过设置属性:modal="false"来关闭点击遮罩层关闭弹窗的功能。这样，当用户点击遮罩层时，弹窗不会自动关闭。例如： <el-dialog :visible.sync="show_form" title="添加活动" width="90%" :...
父页面显示遮罩层弹出半透明状态的dialog
09-04
`closeDiv` 函数则负责关闭dialog和遮罩层。 在HTML中，我们创建了两个div，一个用于遮罩层（`<div id="bg" class="bg"></div>`），另一个用于dialog（`<div id="popDiv" class="mydiv"></div>`）。`...
ElementUI（全局｜局部）禁止点击遮罩层关闭el-dialog弹窗
qq_44711316的博客
10-26 2637
第一种：全局禁止点击遮罩层关闭el-dialog弹窗 在main.js里面： import ElementUI from 'element-ui'; ElementUI.Dialog.props.closeOnClickModal.default = false 第二种：局部 单独给某个dialog设置禁止点击遮罩层关闭el-dialog弹窗 <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" :
e-drawer 和 el-dialog 全局配置默认点击遮照不关闭
qq_44741577的博客
03-27 788
【代码】e-rawer 和 el-dialog 全局配置默认点击遮照不关闭。
el-dialog遮罩层
夏夏
06-30 4454
1.不需要遮罩层设置如下属性： <el-dialog :modal="false"></el-dialog> 2.默认点击空白处对话框会关闭，如果需要点击空白不关闭时，设置如下属性即可： <el-dialog :close-on-click-modal="false"></el-dialog> 后期会一直更新，对于用到的都会一点点补充在里面 ...
修改 el-dialog 默认点击遮照为不关闭
qq_43193513的博客
10-23 245
【代码】修改 el-dialog 默认点击遮照为不关闭。
ElementUI ---- dialog点击取消后蒙遮层不消失
最新发布
2301_81772570的博客
05-31 509
我的场景： 页面A打开了 dialog， 然后点击 页面A dialog 的确定按钮 跳转到 页面B，并且打开页面B的 dialog。但是页面B的 dialog 关闭后，蒙遮层并没消失（已经设置了 :append-to-body="true"）解决：页面A 跳转到页面B 的时候，记得先把页面A的 dialog 关闭！最后发现：页面B的 dialog 蒙遮层用的是 页面A的，o(╥﹏╥)o。
ElmentUI禁止点击遮罩层关闭el-dialog弹窗、对话框滑动不消失功能
Lydia
08-05 2104
ElmentUI全局禁止点击遮罩层关闭el-dialog弹窗、对话框不消失功能、显示弹框时，设置页面滚动条仍然可以滚动。
第六十四：el-dialog设置为点击弹窗以外的区域不自动关闭弹窗
maliyao4233的博客
05-09 837
el-dialog设置为点击弹窗以外的区域不自动关闭弹窗
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值