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

最新推荐文章于 2024-05-14 11:26:39 发布
最新推荐文章于 2024-05-14 11:26:39 发布
阅读量1.1w 收藏 10
点赞数 3
文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31493411/article/details/105665638
版权

在开发中，会遇见出现z-index值很大的遮罩，遮住el-dialog弹出框。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200421192119340.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxNDkzNDEx,size_16,color_FFFFFF,t_70
官网可以看到，遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上。
在这里插入图片描述

所以在el-dialog中添加:modal-append-to-body=false，这样就ok了
在这里插入图片描述
显示正常
在这里插入图片描述

Sawyerswt
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
el-dialog被挡住了，不在最高层，z-index：999无效
Salt_NaCl的博客
02-14 2713
在dialog的组件内加上这段代码 :append-to-body=“true”；或者:modal-append-to-body=“false” 即可解决
vue项目elements Plus 中el-dialog弹窗中日期选择器遮罩层问题
rikimiao的博客
06-14 2404
elemments ui中el-dialog弹窗框遮罩层问题
全屏模式下el-dialog的遮罩层bug问题
最新发布
weixin_54820790的博客
05-14 206
全屏模式下el-dialog的遮罩层bug问题。
el-dialog中el-dialog_wrapper对应的div的z-index递增的问题
ABidMan的博客
04-20 1747
每次开关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 5805
问题：若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值大的图层在z-index值小的图层下面）
Annie的博客
11-13 1万+
一、问题 如下图所示，本应该出现在遮罩层上面的弹框，出现在了遮罩层下面。 审查元素时看到，遮罩层的z-index为2042。 将遮罩层隐藏，查看弹框的z-index为2043。 二、原因 z-index的设置没有问题，但z-index值大的图层反而显示在了下面。从上面两个截图可以看出，遮罩层是插入到body元素上的，而弹框却是在...
在vue中使用el-tab-pane v-show/v-if无效的解决
10-15
总结来说，当在 `el-tab-pane` 中使用 `v-show` 或 `v-if` 遇到问题时，可以考虑以下几点： 1. 理解 `v-show` 和 `v-if` 的工作原理及其与组件内部实现的交互。 2. 使用 `v-if` 代替 `v-show`，尽管这可能会导致性能...
解决vue中el-tab-pane切换的问题
10-15
首先，问题出现在当用户在不同数量的`el-tab-pane`之间切换时，`el-dialog`可能会保持之前的状态，这通常是由于组件没有正确地重置或销毁导致的。为了解决这个问题，我们可以采用以下策略： 1. **给每个`el-tab-...
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
10-16
主要介绍了elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
在使用Element-UI框架开发前端应用时，遇到的一个常见问题是关于`el-dialog`对话框的初始化校验问题。`el-dialog`是Element-UI提供的一个模态对话框组件，它通常与`el-form`结合使用，用于数据输入和验证。然而，当...
【解决】el-message消息弹框的显示被el-dialog覆盖（z-index导致）
qq_38969618的博客
08-06 6755
设置el-message的z-index为更大值即可。或设置el-dialog的z-index为较小值即可。
element-ui框架的el-dialog弹出框被遮罩层挡住了
知行合一，跬步致远
07-02 7万+
如图： 解决办法 在el-dialog标签里添加 :modal-append-to-body='false' 实现效果： 问题解析 先来看看element-ui官网提供的属性说明文档 文档解释：翻译成大白话就是，若el-dialog弹出框设置了modal-append-to-body='true'（默认）属性，它的遮罩层就会被插入到body标签下（即与组件所在的最外层d...
选择用户对话框变到后面去了
宁波阿成的博客
09-25 720
选择用户对话框变到后面去了 在vue form 通过自动组件生成相应的组件界面，包括用户选择，当然这里el-element与 Ant Design Vue等混用了，所以相应的z-index可能默认设置的值应有冲突，所以引起的问题
el-dialog嵌套遇到的问题
梅花寺
05-25 4754
前言 最近在弄PC端的管理平台，然后使用的是vue + elementUI。今天把遇到的问题总结下，正所谓，好记性不如烂笔头。 el-dialog嵌套 我们的业务需求需要嵌套dialog，正常打开第一个dialog是没有没问题的。 页面有蒙层，然后内容区域高亮 如下图 但是打开嵌套的dialog后蒙层盖住了整个页面，导致内容区域也被盖住了。 然后我去查看文档，查看页面dom结构就知道大致原因了。 这是因为dialog的蒙层默认都是插入到body的，然后它的z-index是动态生成，默认是2000，内容区
element对话框的遮蔽层z-index失灵出现在对话框的上层
别人笑我太疯癫，我笑他人看不穿。
05-24 447
正常半透明黑色的遮蔽层应该是在对话框的下面，使用控制查看发现对话框和遮蔽层的z-index每次都不同，而且遮蔽层始终在上面。很无语，用git在不同版本之间排查，虽然找到了这个问题触发的文件，但是具体在哪里一行行的代码删着排查都没找到，中途改了个自定义css的文件名短暂的恢复了，过了几个版本又出现了，所以具体发生的实际原因没定位出来。不过还好最后找到了解决方法，就是指定对话框和遮蔽层都插到body里，就好了。记录一次很无语的事情。写Demo的时候整个前端模块所有主页上用的对话框它们的遮蔽层。
z-index工作原理
weixin_43765747的博客
06-27 323
z-index是针对网页显示中的一个特殊属性 z-index指定两件事情： 当前元素的堆叠顺序； 当前元素是否建立新的堆叠上下文。 z-index这个属性控制着元素在z轴上的表现形式。 当z-index跟的属性值越大说明这个元素离电脑屏幕越近。 注意：z-index仅适用于定位元素，position属性值为 relative 或 absolute 或 fixed的对象。 ...
z-index层重叠事件顺序以及解决办法
热门推荐
希望能找到你的答案
07-08 15万+
在做项目时，常常会用到弹出一个层，然后在这个层上进行操作，操作完成时就关闭弹出层，或者点击别的地方进行关闭层。 通常都会在div样式中设置z-index的值，比如父层设置z-index:100，子层就设置大于100，起到弹出父层时，子层能够显示。 例如（简单写一下）： 关闭弹出层：$("#div1").hide(); //需要引用jquery.js文件 我们也可以点击父层其余
element-ui的el-dialog组件内容在阴影下面
Xue_BT的博客
03-15 2351
只需在 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-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值