element中一个dialog中嵌套另一个diaolog，导致遮罩层覆盖在弹出层上面

最新推荐文章于 2024-03-13 17:06:22 发布
最新推荐文章于 2024-03-13 17:06:22 发布
阅读量1.1k 收藏
点赞数
分类专栏： 前端项目中问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hanxiaomo_/article/details/122188291
版权

Element UI 弹窗 遮罩层 append-to-body Vue.js
关键词由CSDN通过智能技术生成

在项目中遇到在弹出弹窗时，弹窗上面有一层v-modal的遮罩层，需要把遮罩层点掉才能进入弹窗。
这是因为这个弹窗是写在另一个弹窗里面的，也就是此dialog是放在当前组件下的，将其放在body下就能解决问题,具体操作就是在 el-dialog 上添加 :append-to-body=“true”。
在element官网也有对此问题的声明
在这里插入图片描述
在这里插入图片描述

Hanxiaomo_
关注
专栏目录
[问题记录]ElementPlus的嵌套弹窗el-dialog_黑色背景
weixin_45039579的博客
04-05 3244
项目场景： 项目由Nuxt1.0+elementUI重构为vue3+ts+elementplus，其中问题发生在嵌套弹窗显示具体信息。 问题描述 外层弹窗提供事件的创建时间和查看按钮，然后内层弹窗展示具体的事件内容，具体如图所示 其中嵌套弹窗部分代码如下 <template> <el-dialog v-model="dialogHistory" title="历史记录" width="20%" > <p><st
安卓两个Dialog出现问题，第一个Dialog被第二个Dialog的遮罩层遮住了，即第一个Dialog没有自己的遮罩层了
坐等夕阳落time的博客
10-28 3848
介绍 UI画的图有个弹窗做筛选，筛选弹窗里面有个选择时间的功能。安卓选择时间，我采用底部弹出Dialog的方式。理想很美好，按照我的想法，确实两个Dialog都能做出来了，样子还不错。但是却遇到了：点击第一个Dialog的按钮弹出第二个Dialog时间选择弹窗，第一个Dialog就没有自己的遮罩层了，成为了一个平面的背景板。 题目描述的问题，如图所示： 我的第一个Dialog: 思路 首先我想的是，是不是第二个Dialog的背景遮罩层太浅了，我把它调黑点 mDialog.
element的嵌套dialog，在打开第二个dialog的时候会被遮罩层遮住
斑斓 小星愿的博客
01-09 9204
element嵌套dialog遮罩层的问题 做项目的时候遇到一个问题，在一个弹出层的内容区做处理打开另一个弹出层时，第二个弹出层会被遮罩层遮住，点击五次之后遮罩层关闭。 然后才发现，element 的dialog嵌套问题，之所以第二次弹出的会被遮住，是因为没有给定 append-to-body。 正常情况下，我们不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它...
Dialog 对话框里面嵌套了一个Dialog 对话框
xiaoma19941027的博客
01-19 3566
Dialog 对话框里面嵌套了一个Dialog 对话框，解决办法：append-to-body 关键代码如下： <html> <head> …… </head> <body> <div class="dept"> <el-dialog width="450px" :visible.sync="dialogVis...
Vue 弹窗黑色遮罩 class v-modal
weixin_44031940的博客
02-03 1174
Vue 多层弹窗黑色遮罩 class v-modal
vue element UI Dialog 蒙版在dialog上面 和 点击X和 esc 不关闭dialog问题
大铁锤code
03-01 1673
Dialog 的父组件的 position 值为 fixed或absolute或 relative 时，就会出现被蒙板遮住Dialog的情况。 例如父组件样式如下： position : fixed 点击X和 esc 不关闭dialog问题 错误写法 :visible="centerDialogVisible" 正确写法，千万别忘记sync修饰符 :visible.sync="centerDi...
弹出层（遮罩层）弹出页面垂直居中
09-03
弹出层（遮罩层）弹出页面垂直居中，一个不错的例子，可拿来使用。
遮罩层弹出半透明dialog
02-27
遮罩层弹出半透明dialog,很fashion。
vue+elementUI：el-dialog弹出框被遮罩层覆盖及关闭后数据没有清空
Maanqi_1214的博客
03-22 2130
1.el-dialog弹出框被遮罩层覆盖 解决方法：在el-dialog标签里添加 :modal-append-to-body='false’ <el-dialog id="forget-pwd" title="重置密码" :visible.sync="fpwdVisible" width="80%" destroy-on-close :modal-append-to-body="false"> 官网文档中提到：modal-append-to-body决定了遮罩层是否插入至 body 元素上
vue element Dialog 蒙板的覆盖页面
weixin_45422787的博客
07-27 600
明显看到蒙板的z-index把app给盖掉了 解决办法： 在弹框属性上面加这个属性和值就可以解决，这个是element提供的解决方法
web前端-dialog对话框嵌套dialog
MinggeQingchun的博客
12-08 2329
潍坊人
一个 Dialog 内嵌套另一个 Dialog,嵌套的Dialog被遮挡
qq_40664804的博客
04-19 1203
一个 Dialog 内嵌套另一个 Dialog,嵌套的Dialog被遮挡
[解决]element dialog嵌套 第二级弹出的 dialog 会被遮住问题
weixin_50418353的博客
09-02 363
在被遮住的弹窗添加 append-to-body 属性。
element-UI 弹出组件的遮罩层在弹出层dialog模态框的上面 解决方法
飞翔༒之翼
12-03 1944
关于element 里 Dialog 对话框 组件 遇到的问题 element-UI 弹出组件的遮罩层在弹出层dialog模态框的上面 造成的原因： 因为dialog的组件外层div设置了 position：absolute； 属性所以导致遮罩层会在最上面。 解决方法： 1. 在属性内加上这段代码 :append-to-body=“true” ； 2 ，:modal-append-to-body=“false” 也可以 ...
【el-dialog】解决同一组件使用俩个el-dialog，内容被遮罩层覆盖的问题
最新发布
weixin_43923808的博客
03-13 1203
第二次弹框上面。
element ui使用Dialog 对话框关闭遮罩层 class=v-modal元素
xioxi
02-18 5176
关闭遮罩层使用属性 :modal=“false” 是否将遮罩层插入至 body 元素上，默认为true。:modal-append-to-body=“false” 可以将插入body元素上的遮罩层插入到当前元素下 <el-dialog :visible.sync="show_form" title="添加活动" width="90%" :lock-scroll="false" :modal="false" @close="closeDialog"> </el-dialog> 官
el-dialog嵌套问题，第二个弹窗会被遮住的解决办法
博哥的二进制世界
10-26 5701
el-dialog嵌套问题，第二个弹窗会被遮住的解决办法
VUE 多级dialog弹出框被遮罩问题
大小先生
10-21 822
解决方法： 找到自己的遮罩层样式，添加如下代码，即可解决 <style> .v-modal { z-index: 200 !important; } </style>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值