解决消息通知被el-dialog对话框的遮挡的问题($message、$alert、$notify、$confirm)

原创 已于 2022-04-17 21:01:49 修改 · 4k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #vue.js #前端 #elementui #html5

于 2022-04-12 21:23:21 首次发布

文章目录

1. 原因分析

  • 出现这种情况的原因是因为消息弹窗的层级z-index比对话框低导致的，消息弹窗的z-index一般在2001，而对话框的z-index在3000左右。

  • 解决思路很简单，我们只要把对话框的z-index降低即可，让它显示在消息弹窗下面，所以我们只要把对话框的z-index设为1000左右即可,但不要太低，以免对话框被覆盖。

2. 完美解决

直接在对话框上加

:z-index="1000"

在这里插入图片描述

3. 效果

在这里插入图片描述

elementUI的Dialog对话框使用过程中出现灰色遮罩点击才关闭遮罩问题解决办法
super码力的博客
06-06 4108
elementUI的Dialog对话框使用过程中出现灰色遮罩点击才关闭遮罩问题解决办法，可以使用官方文档里面提供了一个append-to-body的属性解决
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
在使用Element-UI框架开发前端应用时，遇到的一个常见问题是关于`el-dialog`对话框的初始化校验问题。`el-dialog`是Element-UI提供的一个模态对话框组件，它通常与`el-form`结合使用，用于数据输入和验证。然而，当...
vue elementUI 之 this.$confirm 的使用
且听风吟的博客
11-23 1万+
vue elementUI 之 this.$confirm 的使用
ElmentUI 设置禁止点击遮罩关闭 el-dialog 弹窗
grootbaby
04-24 7009
mian.js 文件里面： import ElementUI from 'element-ui'; // 修改 el-dialog 默认点击遮照不关闭 ElementUI.Dialog.props.closeOnClickModal.default = false; // https://blog.csdn.net/huanhuan03/article/details/105426879/...
el-dialog被遮罩层遮挡
BangD的博客
11-01 638
后来我又把:modal-append-to-body="false"改成了append-to-body就可以了，开始我在标签中加:modal-append-to-body="false"，遮罩层是在下面了但是，对于页面中有的边框或者搜索框会在遮罩的上面，el-dialog被遮罩层遮挡（解决办法）title="确认退出？
element-ui框架的el-dialog弹出框被遮罩层挡住了
热门推荐
知行合一，跬步致远
07-02 8万+
如图： 解决办法 在el-dialog标签里添加 :modal-append-to-body='false' 实现效果： 问题解析 先来看看element-ui官网提供的属性说明文档 文档解释：翻译成大白话就是，若el-dialog弹出框设置了modal-append-to-body='true'（默认）属性，它的遮罩层就会被插入到body标签下（即与组件所在的最外层d...
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
10-16
除了`el-dialog`弹窗组件外，文件中也提及了`this.$confirm`方法，这是Vue.prototype的一个方法，用于调用Element UI提供的一个确认框对话框。在文件中并没有给出`this.$confirm`的直接代码示例，但可以了解到它是...
element ui 对话框el-dialog关闭事件详解
08-27
在 Element UI 中，`el-dialog` 是一个非常重要的组件，它用来创建对话框或者称为模态窗口，常用于显示警告、确认操作或者进行表单输入等场景。 `el-dialog` 的关闭事件是开发过程中经常会用到的功能，特别是在需要...
element-ui框架的el-dialog弹出框被遮罩层遮挡问题
李十三的博客
06-12 1396
可以发现el-dialog 组件显示的时候被遮罩层挡住了。
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
李十三的博客
09-13 2317
参考我的这篇文章,但是在后面我发现只要是会生成v-model元素的饿了么组件,在使用的过程中都可能出现整个页面被遮罩层挡住的情况,解决方法其实都一样.element-ui框架的el-dialog弹出框被遮罩层遮挡问题_前端李十三的博客-优快云博客。element-ui框架的el-dialog弹出框被遮罩层遮挡问题_前端李十三的博客-优快云博客。可以发现el-dialog 组件显示的时候被遮罩层挡住了。可以发现el-dialog 组件显示的时候被遮罩层挡住了。
el-dialog 组件蒙层把弹框给遮住问题处理
weixin_43837268的博客
05-15 2509
z-index的设置没有问题，但z-index值大的图层反而显示在了下面。从上面两个截图可以看出，遮罩层是插入到body元素上的，而弹框却是在层级比较深的组件中，所以考虑到是受父元素影响了。审查元素得知，在弹框的父元素中，有对z-index的设置，且值小于2042。从图中可以看出，element-ui对弹框的处理，默认把遮罩层插入至了body元素上，而dialog自身没有插入至body元素。设置modal-append-to-body为false，将遮罩层插入至dialog的父元素上，弹框显示正常。
el-dialog被挡住了，不在最高层，z-index：999无效
Salt_NaCl的博客
02-14 4146
在dialog的组件内加上这段代码 :append-to-body=“true”；或者:modal-append-to-body=“false” 即可解决
element的$alert弹出提示框和$confirm确认框
帅的博客
07-28 5890
$alert和$confirm
el-dialog嵌套问题，第二个弹窗会被遮住的解决办法
博哥的二进制世界
10-26 6289
el-dialog嵌套问题，第二个弹窗会被遮住的解决办法
element-ui el-dialog中套el-dialog被遮罩遮盖的问题解决
qq_35919264的博客
07-16 2193
添加“:append-to-body” modal-append-to-body 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上 boolean — true append-to-body Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true boolean — false 你给他扔到body元素中就好了，毕竟之前是两个dialog嵌套嵌套在一起，用“append-to-body Dialog”扔到body中
【el-dialog】解决同一组件使用俩个el-dialog，内容被遮罩层覆盖的问题
weixin_43923808的博客
03-13 1930
第二次弹框上面。
如何让el-dialog对话框全屏
最新发布
07-16
在 Element UI 中，可以通过自定义样式或动态计算尺寸来实现 `el-dialog` 对话框的全屏效果。以下是几种实现方法： --- ### **方法 1：使用 `:fullscreen` 属性（Element UI 2.15.0+）** Element UI **2.15.0 及...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值