element-ui dialog遮罩层在最上层，关掉dialog遮罩层还在

最新推荐文章于 2024-09-25 09:22:20 发布
最新推荐文章于 2024-09-25 09:22:20 发布
阅读量3.3k 收藏 1
点赞数 1
文章标签： ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuxuan89814/article/details/129671775
版权

代码中使用了dialog，dialog中点击某个按钮，又嵌套了一个dialog。

导致最外层的dialog出现后一直被遮罩层遮住，点击确定关掉dialog遮罩层还在。

element-ui的dialog组件有这几个参数：

 其中，append-to-body 嵌套的dialog必须指定为true

    <el-dialog :visible.sync="item.track_check.logcheck" :append-to-body="true"
 title="log查看">

加上后，遮罩层不再遮挡上层

 

小鱼爱曲奇
关注
Element-UI
weixin_41496763的博客
01-20 1145
Element-UI介绍 element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库，方便程序员进行页面快速布局和构建 Element-UI官方站点： https://element.eleme.cn/#/zh-CN Element-UI使用 1命令行方式安装 1. 创建 一个新的项目 2. 当前项目下打开终端, 安装依赖包 ,执行下面的命令 npm i element-ui -S 3. 打开 main.js , 导入Element-UI 相关资源. main.js是.
Element-UI中select的下拉框popper 定位超出可视区的解决方案
beiniao123的博客
09-10 4500
一、问题描述： 当弹出框有表格el-table，el-table中有el-select，当滚动滚动条时，el-select的下拉框超出了弹出层 二、问题分析 产生该问题的原因是，滚动表格时，el-select的输入框被隐藏了，但是下拉框el-popper使用的定位方法是fixed，当显示时，使用的z-index非常大，因此显现在最上层，当滚动滚动条往下移动时el-popper并没有被隐藏。 三、解决方案 当表格滚动时，直接隐藏掉下拉框 四、代码 获取父级元素，并监听该元素的滚动事件，这里使用的是el-t
ElementUI ---- dialog点击取消后蒙遮层不消失
2301_81772570的博客
05-31 736
我的场景： 页面A打开了 dialog， 然后点击 页面A dialog 的确定按钮 跳转到 页面B，并且打开页面B的 dialog。但是页面B的 dialog 关闭后，蒙遮层并没消失（已经设置了 :append-to-body="true"）解决：页面A 跳转到页面B 的时候，记得先把页面A的 dialog 关闭！最后发现：页面B的 dialog 蒙遮层用的是 页面A的，o(╥﹏╥)o。
elementui dialog关闭遮罩还在---已解决
沙漏的前端笔记
04-18 6166
element UI dailog关闭但是遮罩未关闭---已解决
关于element抽屉el-dialog被遮罩层覆盖的解决方法
最新发布
m939499的博客
09-25 237
关于element抽屉el-dialog被遮罩层覆盖的解决方法
element ui 弹窗遮罩层在弹出层的上面。点击关闭弹窗弹窗关闭了但是遮罩层没关
热门推荐
肖肖肖丽珠的博客
04-01 1万+
首先弹窗一个水平测试报告。然后点击查看解析又可以弹窗一个框 这时我们发现这个解析的框被外面一个遮罩层挡住了。 我把这个水平测试报告的弹窗写在一个组件里面。在组件里面又写了解析的弹窗。 首先查看官网的element-ui的el-dialog的一些属性 首先想到是遮罩层的问题所以试了一下在解析的弹窗上加上:modal-append-to-body="false" ...
e-dialog出现额外多了一层遮罩
goodnight2333333的博客
01-11 739
append-to-body：Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true。先看一下我的问题，使用e-dialog对话框，额外多了一层遮罩，点击一下才能去除遮罩层；在el-dialog上面加上：append-to-body就可以啦！PS：默认是false哦！
关于el-dialog上额外多了一层遮罩层
weixin_47175934的博客
11-09 1639
关于el-dialog上额外多了一层遮罩层
解决elementui多层dialog弹窗遮罩问题
Let_me_tell_you的博客
06-07 3557
多层弹窗，会出现遮罩问题，需要鼠标点击一下才能进入当前顶层弹窗正常使用状态。效果图如下：解决办法：在弹窗代码上加上 解决问题。
el-dialog关不掉
04-11
el-dialog是Element UI框架中的一个组件，用于显示对话框或模态框。默认情况下，el-dialog是可以通过点击右上角的关闭按钮或按下ESC键来关闭的。但是有时候可能会遇到无法关闭的情况，这可能是由于以下几个原因导致...
JQuery教程自学笔记（二） -- JQuery UI
liangbinny的专栏
08-02 3383
续上一篇，   三、JQuery UI39 3.1 概述... 39 3.2 JQuery UI 基本工作过程... 41 3.2.1初始化... 41 3.2.2 方法... 42 3.2.3 通用方法... 42 3.2.4 事件... 43 3.2.5 共有事件... 43 3.3 JQuery UI示例... 44 3.3.1 Accord
前端踩坑（七）(vue) el-autocomplete 1.下拉延时出现，影响其他弹出窗口；2.收起下拉
TUTsmile的博客
12-17 1843
解决办法 1.下拉延时出现，影响其他弹出窗口（穿透了蒙版） 根据官方文档可得知防抖延时，有个 debounce 将其设置为 0 即可 <el-autocomplete :debounce="0"> </el-autocomplete> 2.下拉在最上层 设置ref <el-autocomplete v-model="localSelec...
【bug】关于el-dialog上额外多了一层遮罩层
m0_66340074的博客
12-28 5045
2.如果是el-dialog里又嵌套了一层el-dialog弹框，一定要把内层的dialog加上append-to-body="true",插入至 body 元素，保证层级的正确(elementUI的组件内有更多解释)后来听说用absolute绝对定位也会出现这样的问题，我一看自己的代码，原来是给最外面的div设定位为fixed了，无论是绝对定位还是固定定位，都会使元素脱离文档流，删掉换个布局去实现就好了。
el-dialog弹框出现遮罩层,去掉的办法
weixin_50216073的博客
03-14 1676
el-dialog弹框出现遮罩层,用它自带属性 modal-append-to-body。如果出现多个遮罩层,使用append-to-body。
vue element-ui 关于遮罩层挡住了dialog对话框的问题
weixin_44408018的博客
02-19 454
遇到遮罩层挡住对话框，调整对话框位置，一般放在最前面
解决el-dialog双层遮罩层问题
wang457777271的博客
07-12 294
点击添加 出现了遮罩层。
项目中elementUI的dialog遇到的小bug 点击遮罩层不会关闭
weixin_43550660的博客
11-26 4344
项目中elementUI的dialog遇到的小bug 点击遮罩层不会关闭 bug : 点击项目中elementUI的dialog遇到的小bug 点击遮罩层不会关闭 bug 原因： 因为自己在 dialog 加了样式，导致其不能正常关闭， 解决办法：将自己样式删除，采用下面的居中样式（因为能满足我的需求了） 饿了么UI框架中的说明： 将center设置为true即可使标题和底部居中。center仅影...
【vue】Element UIel-dialog 自定义样式 + 去除弹框遮罩层底层可点击
蓝胖子的博客
03-10 4669
【vue】Element UIel-dialog 自定义样式 + 去除弹框遮罩层底层可点击
【UI】element-ui的el-dialog的遮罩层在模态框的前面bug
amoureux555的博客
04-22 685
element-ui的el-dialog的遮罩层在模态框的前面bug，遮罩层置顶了
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> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值