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

已于 2022-04-17 21:01:49 修改
阅读量3.2k 收藏 1
点赞数 2
分类专栏： Element-UI 文章标签： javascript vue.js 前端 elementui html5
于 2022-04-12 21:23:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dingdingdandang/article/details/124134553
版权

文章目录

1. 原因分析

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

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

2. 完美解决

直接在对话框上加

:z-index="1000"

在这里插入图片描述

3. 效果

最低0.47元/天 解锁文章
全栈小定^.^
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element UI this.$message消息框被el-dialog或者this.$alert遮盖
m0_60559048的博客
02-12 1549
问题原因 element UI默认给$message消息弹框动态添加的z-index值比el-dialog或者this.$alert小 解决方案 第一步：给 $message 添加自定义样式 this.$message({ message: "我是消息", customClass: "message" }); 第二部： 在当前主键 全局样式中加 非 scoped <style scoped></style> <style > .message...
关于VUE2中element UI中Dialog 对话框遮罩层错误的解决方案
Aeporn的博客
06-28 1491
现象-全局蒙版 在el-dialog中添加 属性第六行 效果 官方AP I解释为 dialog 想要在body上，也就是最顶层， 就必须要设置该属性为false
解决elementui的message与dialog的遮罩层的层级问题
最新发布
qq_49698477的博客
06-05 475
在写项目的过程中我出现了message组件的层级比dialog的遮罩层层级低的问题，要想让message展示在dialog的遮罩层之上，可以给message设置一个自定义类名，再给这个类添加z-index属性，且值比2007大，因为dialog的遮罩层的层级为2007。
vue elementUI 之 this.$confirm 的使用
热门推荐
且听风吟的博客
11-23 1万+
vue elementUI 之 this.$confirm 的使用
ElmentUI 设置禁止点击遮罩关闭 el-dialog 弹窗
grootbaby
04-24 6499
mian.js 文件里面： import ElementUI from 'element-ui'; // 修改 el-dialog 默认点击遮照不关闭 ElementUI.Dialog.props.closeOnClickModal.default = false; // https://blog.csdn.net/huanhuan03/article/details/105426879/...
解决vue弹窗被遮罩层遮挡和关闭弹窗后遮罩层不消失的两个问题
weixin_55966654的博客
12-05 7484
（1）弹窗被遮罩层被遮罩层遮挡问题； （2）关闭弹窗后，遮罩层不关闭问题；
Element-UI 组件MessageBox 弹框 关闭遮罩层
weixin_43896125的博客
11-04 2806
关闭遮罩层方法
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
在使用Element-UI框架开发前端应用时，遇到的一个常见问题是关于`el-dialog`对话框的初始化校验问题。`el-dialog`是Element-UI提供的一个模态对话框组件，它通常与`el-form`结合使用，用于数据输入和验证。然而，当...
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
12-09
调试了好久, 还能凑合用, 请直接看DOME 示例,复制就能用: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Title</title> <!...
element ui 对话框el-dialog关闭事件详解
08-27
在 Element UI 中，`el-dialog` 是一个非常重要的组件，它用来创建对话框或者称为模态窗口，常用于显示警告、确认操作或者进行表单输入等场景。 `el-dialog` 的关闭事件是开发过程中经常会用到的功能，特别是在需要...
vue中el-select下拉框被遮挡问题
weixin_44768794的博客
12-02 1万+
记录一下最近给我最大困扰的一个问题： element-ui自身有个特点在于 z-index层级是一直变动的，如果不加入其他的样式，比如说自定义UI 或引入其他UI，使用起来是没有问题的，问题在于自定义UI设置了z-index值，就出现了很多很多问题： 1.点击按钮无效，实际是因为弹窗被dialog层遮挡 2.this.¥message、 this.¥confirm被遮挡 (美元符不显示，只能用¥代替一下) 3.也就是今天这个问题，下拉框被遮挡 PS：我是个实习生，全局的东西我不能去动，只能对指定症状下药
【实习小tip】多层dialog弹窗遮罩问题、elementUI的form表单组件的select框在只读的情况下没办法拿到传来的数据、从弹窗子组件获取数据后需要刷新页面
fangyuan__的博客
08-07 984
多层dialog弹窗遮罩问题、elementUI的form表单组件的select框在只读的情况下没办法拿到传来的数据、从弹窗子组件获取数据后需要刷新页面
解决 element-ui 抽屉弹窗、弹窗、气泡弹窗、消息弹窗、确认弹窗【el-drawer、el-dialog、el-popover、$message、$confirm】的 遮罩层z-index问题
ylnzzl的博客
10-28 4477
解决 element-ui 抽屉弹窗、弹窗、气泡弹窗、确认弹窗【el-drawer、el-dialog、el-popover、$confirm】的 遮罩层z-index问题
vue+elementUI项目中，el-dialog弹出框被遮罩层覆盖
杜鲁阳的博客
06-19 8682
vue+elementUI项目中，el-dialog弹出框被遮罩层覆盖 一、问题表现 el-dialog弹出框被遮罩层覆盖 但是，浏览器调试时，明明遮罩层比弹出框z-index层级小【低一层】。 二、解决方法 在el-dialog标签里添加 :modal-append-to-body='false’ :modal-append-to-body='false' 成功被解决。 三、解决原理：...
ElementUI Message 消息提示，多个显示被覆盖的问题
前端笔记——放弃很容易,但坚持一定很酷
03-13 902
代码：主要是在this.$message 方法外层加上 setTimeout 方法。
Vue 中 多个 MessageBox 弹框被覆盖的问题
weixin_54362826的博客
08-09 1585
前情 页面一打开就有一个提醒修改密码的弹框,如果这时候再有其他 messageBox 弹框的时候就会被覆盖,形成多个弹框排队等着处理的效果,第一个弹框永远在最前面,不能及时处理消息 分析 ElementUI 的组件是挂载在 Vue 上的,而全局的 Vue 实例只有一个,所以只能一个一个地弹出 MessageBox 解决方法: 将 MessageBox 封装成一个插件,修改密码的弹框使用插件,其他地方正常使用 ElementUI 的 MessageBox 最终效果 代码 MsgBox.vue &l
Element-diag中遮罩
weixin_34080903的博客
12-12 336
<el-dialog title="收货地址" :visible.sync="dialogFormVisible" append-to-body> <el-form :model="form"> <el-form-item label="活动名称" :label-width="formLabelWidth"> <el-input v-model=...
element遮罩_element-ui遮罩层el-dialog的使用
weixin_39614276的博客
12-19 1024
template点击打开 Dialogtitle="提示":visible.sync="dialogVisible"width="80%":append-to-body="true":before-close="handleClose":close-on-click-modal="false">这是一段信息取 消确 定datadialogVisible:false,methodscloseS...
[js] 手动改变z-index大小
qq_14993591的博客
03-07 334
【代码】[js] 手动改变z-index大小。
Vue中使用element-ui的el-dialog对话框
05-30
要在Vue中使用element-ui的el-dialog对话框，你需要先安装element-ui，可以使用npm或者yarn进行安装。 1. 通过npm安装 ``` npm install element-ui --save ``` 2. 通过yarn安装 ``` yarn add element-ui ``` 安装完成后，在Vue项目中引入element-ui，并注册el-dialog组件。 ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 现在你可以在Vue组件中使用el-dialog组件了。下面是一个简单的示例： ```html <template> <div> <el-button type="primary" @click="dialogVisible = true">打开对话框</el-button> <el-dialog title="提示" :visible.sync="dialogVisible"> <span>这是一个对话框</span> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="dialogVisible = false">确定</el-button> </span> </el-dialog> </div> </template> <script> export default { data() { return { dialogVisible: false } } } </script> ``` 在这个示例中，我们使用了el-button组件来触发打开对话框的事件，然后在el-dialog组件中定义了对话框的标题和内容，并使用visible.sync来控制对话框的显示和隐藏。在底部我们使用了el-button组件来定义对话框的按钮区域。 这是一个简单的例子，你可以根据自己的需求来定制对话框的样式和交互。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值