解决elementui多层dialog弹窗遮罩问题

最新推荐文章于 2024-05-31 16:00:38 发布
最新推荐文章于 2024-05-31 16:00:38 发布
阅读量3.3k 收藏 2
点赞数 5
文章标签： elementui vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Let_me_tell_you/article/details/125173476
版权

多层弹窗，会出现遮罩问题，需要鼠标点击一下才能进入当前顶层弹窗正常使用状态。效果图如下：

image-20220607174025167

解决办法：

在弹窗代码上加上 append-to-body 解决问题。

 <el-dialog
    title="修改信息"
    width="35%"
    append-to-body
></el-dialog>

image-20220607174508175

Let_me_tell_you
关注
  • 5
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android 自定义加载动画Dialog弹窗效果的示例代码
08-19
Android 自定义加载动画Dialog弹窗效果的示例代码 Android 自定义加载动画Dialog弹窗效果是Android开发中常用的效果之一，通过自定义加载动画Dialog弹窗可以提高用户体验。下面将详细介绍Android 自定义加载动画...
dialog 弹窗-倒计时
10-28
在本文中，我们将深入探讨`dialog`弹窗中的一个特殊功能——倒计时。倒计时对话框在很多应用场景中都非常有用，比如表单验证、限时优惠提醒或者等待过程的可视化提示。 首先，让我们理解什么是倒计时。倒计时是指从...
element ui 在dialog里嵌套使用MessageBox，MessageBox被遮挡
wang_xiao_ye的博客
12-26 528
原因：element ui 默认给$message消息弹框动态添加的z-index值比对dialog小，可控制台具体查看。2、给message设置自定义样式customClass，将z-index设为3000。1、dialog增加属性：z-index=“1000”
ElementUI ---- dialog点击取消后蒙遮层不消失
最新发布
2301_81772570的博客
05-31 212
我的场景： 页面A打开了 dialog， 然后点击 页面A dialog 的确定按钮 跳转到 页面B，并且打开页面B的 dialog。但是页面B的 dialog 关闭后，蒙遮层并没消失（已经设置了 :append-to-body="true"）解决：页面A 跳转到页面B 的时候，记得先把页面A的 dialog 关闭！最后发现：页面B的 dialog 蒙遮层用的是 页面A的，o(╥﹏╥)o。
element-ui dialog遮罩层在最上层，关掉dialog遮罩层还在
yuxuan89814的专栏
03-20 2959
element-ui dialog遮罩层遮挡
elemtui 提示消息element-ui message被遮罩层覆盖解决方法
zhangxueyou2223的博客
09-19 1466
elemtui 提示消息element-ui message被遮罩层覆盖解决方法。
elementUI中dialog出现冲突，遮罩层直接全黑解决方法
前端代码小白的日常博客
09-07 3318
在使用饿了么组件中的dialog时，由于多个路由组件之间的嵌套出现了一种情况。点击弹出dialog的时候会出现这种情况，如上图。搜了有博主的解决方法，内容，特此记录一下。
Vue知识分享03-多个dialog对话框
m0_64501863的博客
10-09 3959
添加数据已经创建了一个dialog对话框,修改数据还需要一个dialog对话框，如何创建多个平行dialog对话框？
element ui 弹窗遮罩层在弹出层的上面。点击关闭弹窗弹窗关闭了但是遮罩层没关
热门推荐
肖肖肖丽珠的博客
04-01 1万+
首先弹窗一个水平测试报告。然后点击查看解析又可以弹窗一个框 这时我们发现这个解析的框被外面一个遮罩层挡住了。 我把这个水平测试报告的弹窗写在一个组件里面。在组件里面又写了解析的弹窗。 首先查看官网的element-ui的el-dialog的一些属性 首先想到是遮罩层的问题所以试了一下在解析的弹窗上加上:modal-append-to-body="false" ...
element-ui中dialog弹窗关闭按钮失效的解决
10-14
主要介绍了element-ui中dialog弹窗关闭按钮失效的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Android自定义Dialog弹窗提示
10-15
本篇将详细介绍如何在Android中创建自定义的Dialog弹窗提示。 首先，我们需要理解Dialog的基本结构。Dialog通常由一个对话框窗口和一个内容视图组成。窗口负责Dialog的整体外观，包括背景、边框和阴影等；内容视图...
elementui dialog关闭遮罩还在---已解决
沙漏的前端笔记
04-18 5791
element UI dailog关闭但是遮罩未关闭---已解决
ElementPlus使用多级弹窗（Dialog）出现蒙版遮罩问题
qq_33225414的博客
01-18 883
ElementPlus使用多级弹窗遮罩
ElementUI Dialog打开时出现遮罩层
长不大的大灰狼
03-23 2839
el-dialog设置遮罩层， :modal=“true” :modal-append-to-body=“true” 在打开dialog，有遮罩时，解决方案如下： :append-to-body="true" 自定义遮罩层： <div v-if="showModal" class="mask"> <img class="loading-image" src="../../image/loading.gif" alt="正在处理，请等待。。。"> </div>
elementUI 多层dialog 嵌套遮罩问题处理（亲测有效）
dyp5236587的专栏
07-27 1091
我是第一个dialog
elementUi el-dialog多个嵌套弹出层被遮罩层遮住问题
qq_55928824的博客
08-23 336
elementUi el-dialog多个嵌套弹出层被遮罩层遮住问题
element-ui / element-plus dialog 自定义层级
又是再见?
12-28 4171
方法土了点, 实属无奈之举, 大家在用的时候类名可以自己定义一下, 我这里直接写成一样的了。
ELEMENTUI点击单元格弹窗
07-27
您可以使用 Element UI 的 Table 组件来实现点击单元格弹窗的效果。首先，您需要在表格的列定义中添加一个自定义的 slot，用于渲染单元格内容。然后，在这个 slot 中，您可以使用 Element UI 的 Dialog 组件来实现弹窗效果。 下面是一个示例代码： ```vue <template> <div> <el-table :data="tableData"> <el-table-column label="姓名" prop="name"> <template slot-scope="scope"> <div @click="showDialog(scope.row)"> {{ scope.row.name }} </div> </template> </el-table-column> <!-- 其他列定义 --> </el-table> <el-dialog :visible.sync="dialogVisible"> <!-- 弹窗内容 --> <span>弹窗内容</span> </el-dialog> </div> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18 }, { name: '李四', age: 20 }, // 其他数据 ], dialogVisible: false }; }, methods: { showDialog(row) { // 处理点击单元格的逻辑 console.log(row); // 显示弹窗 this.dialogVisible = true; } } }; </script> ``` 在上面的示例中，我们定义了一个表格，其中的姓名列中的单元格被点击时会触发 `showDialog` 方法。在 `showDialog` 方法中，您可以处理点击单元格的逻辑，并将 `dialogVisible` 设置为 true，从而显示弹窗。 在弹窗的内容部分，您可以根据需求自定义弹窗的内容。 请根据您的具体需求进行修改和扩展。希望对您有帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值