在VUE中使用el-dialog出现z-index值很大的遮罩解决办法

最新推荐文章于 2025-03-12 12:26:38 发布
最新推荐文章于 2025-03-12 12:26:38 发布
阅读量3k 收藏 1
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_34169240/article/details/124042565
版权

在 <el-dialog中加上 :modal-append-to-body="false"

付月半子
关注
Vue项目element-ui弹窗组件el-dialog，阻止点击遮罩层关闭
m0_38109616的博客
12-01 2195
Vue项目element-ui弹窗组件el-dialog，阻止点击遮罩层关闭
解决 element-ui 抽屉弹窗、弹窗、气泡弹窗、消息弹窗、确认弹窗【el-drawer、el-dialog、el-popover、$message、$confirm】的 遮罩层z-index问题
ylnzzl的博客
10-28 5519
解决 element-ui 抽屉弹窗、弹窗、气泡弹窗、确认弹窗【el-drawer、el-dialog、el-popover、$confirm】的 遮罩层z-index问题
el-dialog层级问题
最新发布
qq_44330871的博客
03-12 276
css中控制层级的属性 ：z-index ，在style中设置z-index时出现el-dialog的遮罩层大于dialog的现象，在el-dialog上添加tinymce组件，第二次遇到点击tinymce组件上的插件本应出现下拉菜单但无反应的问题。el-dialog中和层级相关的属性：modal-append-to-body。原因就是el-dialog的层级高于下拉菜单的层级，遮挡住了。解决方法是z-index属性直接写在标签内。元素中，避免样式或层级问题。
el-dialog中el-dialog_wrapper对应的div的z-index递增的问题
ABidMan的博客
04-20 2713
每次开关dialog，其z-index都会递增，就会导致将对话框外的东西遮住。(例：对话框右侧有两个摄像头，z-index为2020，而dialog的z-index默认为2000，每次开关dialog都会让z-index递增，最后导致摄像头的z-index小于dialog的z-index，导致摄像头的翻页无法点击（被遮住了）)
element-ui dialog z-index 递增问题
yangqii的博客
07-08 6317
问题：若el-dialog中要对图片进行预览，那么图片预览dialog可能会被上一层dialog遮挡，即图片预览不显示在最上方（也可是el-dialog嵌套其他dialog的情况） 图示 分析：观察el-dialog开启关闭，会发现dialog元素的z-index层级每次都增加2（el-dialog可以是同一元素也可以是不同元素），el-image的z-index默认2000，el-dialog的z-index值大于el-image的z-index值 解决方法：设置el-image 的 z-ind
el-dialog被挡住了，不在最高层，z-index：999无效
Salt_NaCl的博客
02-14 3905
在dialog的组件内加上这段代码 :append-to-body=“true”；或者:modal-append-to-body=“false” 即可解决
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
10-16
总结以上知识点，我们可以了解到在Vue项目中，如何利用Element UI来构建用户界面，包括如何使用`<el-dialog>`组件创建可拖拽的弹窗，以及如何通过`this.$confirm`方法调用确认框。同时，文件还展示了如何通过原生...
使用Vue3 + ElementPlus，让抽屉（el-drawer）显示在对话框（el-dialog）中
qq_48651377的博客
05-11 2000
定位是相对于 static（position默认值）定位以外的第一个父元素进行定位，如果不存在已定位的父元素，则相对于body元素。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。定位是相对于浏览器视口来定位的，也就是说，元素的位置不会随着页面滚动而改变，始终会固定在视口的某个位置。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。解决办法：将抽屉的遮罩定位到对话框上，即。属性自定义遮罩的css样式，
vue2.0+elementui el-dialog对话框去掉覆盖层后解决无法操作底层的问题
qq_45927262的博客
02-11 319
element-dialog对话框去掉覆盖层后解决无法操作底层的按钮的问题_element dialog下面。element-dialog对话框去掉覆盖层后解决无法操作底层的按钮的问题_element dialog下面-优快云博客。对去掉覆盖层之后，发现无法操作底层页面。设置css 样式来解决。给对话框设置一个唯一的 ID，仅对当前对话框进行相关处理。
已处理vue框架 el-dialog标签中 v-dialogDrag属性拖动弹出层拖出窗口bug
weixin_44006009的博客
02-08 812
已处理vue框架 el-dialog标签中 v-dialogDrag属性拖动弹出层出窗口bug
el-dialog遮罩层覆盖弹框（z-index值大的图层在z-index值小的图层下面）
热门推荐
Annie的博客
11-13 1万+
一、问题 如下图所示，本应该出现在遮罩层上面的弹框，出现在了遮罩层下面。 审查元素时看到，遮罩层的z-index为2042。 将遮罩层隐藏，查看弹框的z-index为2043。 二、原因 z-index的设置没有问题，但z-index值大的图层反而显示在了下面。从上面两个截图可以看出，遮罩层是插入到body元素上的，而弹框却是在...
获取页面中最大的z-index
菜虚鲲的博客
04-07 1060
[…document.all].reduce((r, e) => Math.max(r, +window.getComputedStyle(e).zIndex || 0), 0) 在element-ui中，可以统一使用PopupManager管理 import { PopupManager } from ‘element-ui/lib/utils/popup’ PopupManager.nextZIndex()
【解决】el-message消息弹框的显示被el-dialog覆盖（z-index导致）
qq_38969618的博客
08-06 8800
设置el-message的z-index为更大值即可。或设置el-dialog的z-index为较小值即可。
element对话框的遮蔽层z-index失灵出现在对话框的上层
别人笑我太疯癫，我笑他人看不穿。
05-24 584
正常半透明黑色的遮蔽层应该是在对话框的下面，使用控制查看发现对话框和遮蔽层的z-index每次都不同，而且遮蔽层始终在上面。很无语，用git在不同版本之间排查，虽然找到了这个问题触发的文件，但是具体在哪里一行行的代码删着排查都没找到，中途改了个自定义css的文件名短暂的恢复了，过了几个版本又出现了，所以具体发生的实际原因没定位出来。不过还好最后找到了解决方法，就是指定对话框和遮蔽层都插到body里，就好了。记录一次很无语的事情。写Demo的时候整个前端模块所有主页上用的对话框它们的遮蔽层。
z-index 的最大值和最小值
javahellohahaha的博客
11-11 2931
请说说z-index最大值和最小值分别可以设置为多少？
vue element dialog组件蒙层问题
qq_45675879的博客
01-13 1214
弹框遮罩蒙层在上，内容区域在下 这种问题时因为父元素固定定位，但是层级比弹框的层级底造成的，也就是说设置固定定位时 z-index的值低于弹框的层级。 <el-dialog title="遮罩层问题" :visible.sync="dialogVisible" :show-close="false" :close-on-click-modal="false" :modal-append-to-body="false" > </el-dialog> :mo
vue项目中z-index不起作用（将vue实例挂在到window上面）
weixin_30577801的博客
08-22 1307
问题描述：由于原有项目（传统项目）中嵌入新的vue组件，dialog弹出框的z-index：999999；任然不起作用； 解决办法：将vue实例挂载到window 解决代码如下： 入口文件index.js中 import Index from './components/index.vue' import './index.pcss' function install...
el-dialog遮罩层的问题
simple_smile1208的博客
08-30 8749
在一个el-dialog中点击再出现一个el-dialog时会出现一个遮罩层的问题 解决方法：添加:append-to-body="true"属性
在vue中给 el-dialog添加遮罩层效果
06-13
要在 Vue 中给 `el-dialog` 添加遮罩层效果，可以通过设置 `el-dialog` 的 `lock-scroll` 属性为 `true` 来实现： ```html <el-dialog :visible="dialogVisible" :lock-scroll="true"> <!-- 对话框内容 --> </el-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值