elementplus如何实现dialog遮罩层外的元素可以被操作点击

最新推荐文章于 2025-04-01 13:24:01 发布
最新推荐文章于 2025-04-01 13:24:01 发布
阅读量2.2k 收藏 9
点赞数 10
分类专栏： element ui 文章标签： vue.js elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Curry_On/article/details/139442443
版权

elementplus如何实现dialog遮罩层外的元素可以被操作点击

element plus 组件库中的 dialog 组件可以说是使用频率最高的组件之一，它的效果是弹出一个对话框，外面默认会有一个蒙层。

现在我碰到的需求是，弹窗要正常显示，但是蒙层下面的元素内容又是可以点击的，如何实现呢？

以下是我的解决代码（vue）

首先是 HTML 部分

<div class="dialog">
  <el-dialog
    v-model="visible&#
最低0.47元/天 解锁文章
element 弹窗在弹出后鼠标还可以点击页面其他元素
虎康的博客
12-04 873
如下图所示，在点击弹出弹框后，支持如下需求。
element-plus dialog对话框去掉覆盖层、并可操作底层的按钮
weixin_44442674的博客
03-26 1189
加载cesium时，地球出现后不能操作，刚开始以为cesium引用出现问题，控制台也没报错，最后发现时引用的element-plus抽屉组件存在遮罩层的原因。由于抽屉组件存在遮罩层，虽然设置:modal="false"不显示遮罩层，但是遮罩层只是变为透明，但是仍然存在，点击事件失效。查看元素，遮罩层没有类名，添加自定义类名 modal-class="drawer"，网上找的css样式应用后不起作用。最后发现是因为局部样式造成的样式不起作用，使用样式穿透，问题解决。
Element-Dialog 弹窗在弹出后鼠标还可以点击页面其他元素
qq_54003956的博客
11-19 417
【代码】Element-Dialog 弹窗在弹出后鼠标还可以点击页面其他元素。
【Element】element-plus中el-dialog弹窗隐藏遮罩并可以控制弹窗后的元素、点击、滚动、其他事件操作等
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
11-29 4079
但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。从 dom 元素我们知道 el-dialog 的层级为三层，外面两层是遮罩，第三层才是真正的弹窗元素，因此，我们需要做的就是把外层最外层的遮罩事件去掉，保留最里面的。el-dialog 隐藏遮罩并且可以控制弹窗后的元素、点击、滚动、其他事件操作，比如一个弹窗打开了，我要能控制弹窗后面的滚动、点击等等一系列事件。首先我们需要隐藏弹窗遮罩。
element plus的dialog组件如何实现不关闭窗口时正常操作其他区域Dom
cty1897的博客
07-02 2337
实现在不关闭对话框的情况下，正常操作其他区域的Dom；element plus的dialog组件的modal属性可以关闭灰色遮罩层, 但仍然无法操作其他区域的Dom;因为dialog除了model以外还存在着透明的遮罩层, 导致我们无法操作其他区域的Dom;
vue3+element-plus中dialog对话框组件去掉遮罩层后可以操作底层页面，以及弹窗嵌套弹窗如何去掉遮罩层且可以操作底层页面
liuzaixi的博客
03-18 3323
三、如果是弹窗嵌套弹窗，以上方法可能不会去掉遮罩层，这时就需要添加官网给出的另一个属性：append-to-body，具体解释可以查看官网。是自定义类名，和下面代码中的类名相同即可。
element-ui dialog设置为点击弹窗以外的区域不关闭弹窗
莫逸雪的博客
11-24 7169
第一种: 在el-dialog标签中添加:close-on-click-modal="false"即可 <el-dialog title="标题" :close-on-click-modal="false" :visible.sync="dialogEnrol" width="30%"> 弹窗内容 </el-dialog> 第二种:全局设置 在mian.js里面： import ElementUI from 'element-ui'; // 修改 el-dialog 默认点击
vue3+element-plus中dialog组件去掉遮罩层后可以操作底层页面，以及弹窗嵌套弹窗如何去掉遮罩层且可以操作底层页面
weixin_42498594的博客
06-03 766
添加两个属性去掉遮罩层。
透过遮罩层点击下方元素
qq_58845736的博客
02-18 3516
当有遮罩层遮住下方点击事件时，鼠标点击下方元素是无效的 1.可以直接在遮罩层添加pointer-events:none 2.当遮罩层也有需要点击的元素时，可以给遮罩层添加pointer-events:none，在遮罩层需要点击的事件上添加属性pointer-events:auto ...
父页面显示遮罩层弹出半透明状态的dialog
09-04
在网页设计中，创建一个父页面显示遮罩层并弹出半透明状态的dialog是常见的交互效果，这种设计可以提供用户友好的体验，使他们能够专注于当前操作而不会被其他页面元素分心。Dialog（对话框）通常用来展示重要的信息...
解决Vue开发中对话框被遮罩层挡住的问题
01-19
在Vue的开发中，一旦我们用到对话框，经常出现的问题是对话框被遮罩层挡住，无论是Element-UI dialog还是bootstrap的Modal，如下图所示： 造成这个问题的原因是对话框组件的父元素的position有fixed或者relative...
Android自定义Dialog内部透明、外部遮罩效果
08-26
因此，通过自定义 Dialog，我们可以实现 Android 自定义 Dialog 内部透明、外部遮罩效果，提高应用程序的用户体验。 知识点： * Android Dialog 的基本概念 * Dialog 的样式和布局 * WindowManager.LayoutParams ...
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
10-19
jQuery 实现打开网页自动弹出遮罩层或点击弹出遮罩层的功能是网页交互设计中常见的需求，常用于创建模态对话框、提示信息或者加载等待效果。在这个示例中，我们将深入探讨如何利用jQuery来完成这个任务，以及涉及的...
Dialog区域外可响应点击事件
smileiam的专栏
05-28 7723
遇到这样一个需求，一个RecyclerView布局（GridView九宫格样式），每点击一项，弹出一个气泡提示框，再点击下一项的时候，上一项气泡提示框消失，下一项气泡提示框显示出来。用Dialog实现提示框显示，一般需要点击两次item才能实现上面的效果，第一次是Dialog响应点击事件，消失提示框；第二次点击才Item能接收到。 要实现上面的效果，必须让Activity能接收Dialog区域外...
Vue3+Element Plus：使用el-dialog，对话框可拖动，且对话框弹出时仍然能够在背景页（对话框外部的页面部分）上进行滚动以及输入框输入信息
huangfuyk.的博客
09-16 1646
Vue3+Element Plus：使用el-dialog，对话框可拖动，且对话框弹出时仍然能够在背景页（对话框外部的页面部分）上进行滚动以及输入框输入信息
vue3+element Plus实现弹框的拖拽、可点击底层页面功能
weixin_57399180的博客
11-03 2617
vue3+element Plus实现弹框的拖拽、可点击底层页面功能
el-dialog 导致无法触发背后图层的鼠标事件的解决方法
qq_41672186的博客
11-16 423
【代码】el-dialog 导致无法触发背后图层的鼠标事件的解决方法。
ElementUI的Dialog弹窗实现拖拽移动功能
学IT，找陈寒
11-17 8469
ElementUI 是饿了么前端团队基于 Vue.js 开发的一套开源的 UI 组件库，包含了丰富的组件，适用于快速构建美观的Web界面。其中，Dialog 组件是常用的弹窗组件，提供了诸如打开、关闭、拖拽等功能。
VUE H5 实时获取地理位置 不需要weixin-js-sdk 这个
最新发布
m0_73035846的博客
04-01 196
同时在控制台打印出当前的经度和纬度。如果获取位置信息失败，则会在第二个回调函数中通过。方法来获取当前设备的位置信息。如果获取成功，会在回调函数中通过。弹出错误提示框，告知用户无法获取位置信息及具体的错误信息。获取到经度和纬度，并将其分别赋值给。
el-dialog 取消点击遮罩层关闭dialog方法
07-20
`el-dialog` 是 Element UI 中的一个轻量级对话框组件，在 Vue.js 中使用。如果你想取消默认的点击遮罩层关闭对话框的行为，并自定义这一过程，你可以通过在 `el-dialog` 的选项对象中设置 `customClass` 或者 `close-on-click-modal` 属性。 1. 如果你想保留遮罩层，但禁用点击关闭功能，可以添加一个自定义 CSS 类到遮罩层上，比如： ```html <template> <el-dialog :custom-class="{'no-close-on-mask': true}"> <!-- Your dialog content here --> </el-dialog> </template> <script> export default { data() { return { noCloseOnMask: false, }; }, }; </script> <style scoped> .no-close-on-mask .el-dialog__mask { pointer-events: none; } </style> ``` 在这个例子中，`.no-close-on-mask .el-dialog__mask` 将阻止遮罩层响应鼠标点击事件。 2. 如果完全不想让用户通过点击遮罩关闭对话框，可以设置 `close-on-click-modal` 为 `false`： ```html <template> <el-dialog :close-on-click-modal="false"> <!-- Your dialog content here --> </el-dialog> </template> ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值