element-UI 弹出组件dialog的遮罩层在弹出层的上面 - 解决篇

最新推荐文章于 2024-10-12 08:36:56 发布
最新推荐文章于 2024-10-12 08:36:56 发布
阅读量1.4w 收藏 3
点赞数
分类专栏： element-ui Element踩坑篇
本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！
本文链接：https://blog.csdn.net/qq_35393869/article/details/88106031
版权

element-UI 弹出组件的遮罩层在弹出层dialog模态框的上面？

bug演示：

在这里插入图片描述
代码逻辑调整之后，页面就正常了（代码和效果图 · 见下文）:
在这里插入图片描述
在这里插入图片描述

解决办法：

将dialog组件剪贴到最父级div元素之下，以“子一级元素”的方式去定义设置。多半可以解决上述问题。

（如下图所示，也就是放置到templete标签下最大div标签元素之下。）

在这里插入图片描述

以上就是关于“　element-UI 弹出组件dialog的遮罩层在弹出层的上面 - 解决篇　”　的全部内容。

草巾冒小子
关注
专栏目录
Vue项目element-ui弹窗组件el-dialog，阻止点击遮罩层关闭
m0_38109616的博客
12-01 1994
Vue项目element-ui弹窗组件el-dialog，阻止点击遮罩层关闭
解决 element-ui 抽屉弹窗、弹窗、气泡弹窗、消息弹窗、确认弹窗【el-drawer、el-dialog、el-popover、$message、$confirm】的 遮罩层z-index问题
ylnzzl的博客
10-28 5038
解决 element-ui 抽屉弹窗、弹窗、气泡弹窗、确认弹窗【el-drawer、el-dialog、el-popover、$confirm】的 遮罩层z-index问题
模态框modal
ShuaiFanPi的博客
05-22 984
modal这玩意是含在bootstrap里面，作用和对话框Dialog差不多，但是它不存z-index的问题，反正就是一层一层叠在上面，新生成的模态框会把下面模态框则挡住。特别适合编辑有很多的业务场景 step0:引用bootstrap的css和js step1: 定义模态框（尼玛。。。其实就是个加modal样式的div）
element-ui弹出组件的遮罩层在弹出层el-dialog的上面
岁末zzz的博客
07-23 6288
问题：加完el-dialog后，测试发现，遮罩层在弹出层上面。 解决办法： 1、给el-dialog的父元素添加z-index属性，一定要比遮罩层的大 z-index：2000//此为样例 2、如果第一个办法还是不能解决，我们就用第二个办法。 出现这个状态的原因： 可以检查下我们的代码布局样式，在dialog的组件外层div我们设置了 position：absolute 属性，这个属性导致遮罩层会在最上面。 解决办法： 在dialog的组件内加上这段代码 :append-to-body=“true”
Element UI 两个el-dialog层级
最新发布
前端小菜鸟也有人起的博客
10-12 198
Element UI 两个el-dialog层级
解决 element ui 弹出组件的遮罩层在弹出层的上面的问题
zhumengzj的博客
07-20 3166
添加 :modal-append-to-body="false"
element ui 弹出组件的遮罩层在弹出层的上面的解决方法:modal-append-to-body="false"
热门推荐
webZRH的博客
08-14 2万+
<el-dialog :visible.sync="dialogImg" :modal-append-to-body="false"> <img :src="dialogImageUrl" alt=""> </el-dialog> 运用element的Upload 上传组件预览图片会出现遮罩层在弹出层的上面在遮罩处添加:modal-append-to-bo...
【UI】element-ui的el-dialog的遮罩层在模态框的前面bug
amoureux555的博客
04-22 686
element-ui的el-dialog的遮罩层在模态框的前面bug，遮罩层置顶了
elementui弹出框被遮罩层挡住的问题
nss33678的博客
03-28 1092
2，:modal-append-to-body='false'或者:append-to-body='true'，改变他的这个属性就好。但是遮罩层的范围会变。1，el-dialog直接放在组件最外层div中，就不会出现遮罩问题。偶然发现有个页面会出现这种问题，有两个解决方法。
element-ui中dialog弹窗关闭按钮失效的解决
10-14
Dialog组件是用于展示弹出式对话框的组件，它可以在当前页面显示内容，支持自定义内容和关闭按钮。在正常情况下，Dialog可以通过点击关闭按钮或者操作布尔型的数据模型来控制其显示和隐藏。例如： ```html <el-...
【避坑指“难”】Element-ui中el-dialog组件显示时有蒙层（遮罩层）怎么破？
椰卤工程师的个人博客
07-06 3984
到底是什么问题？ 没错就是这样，就像上图一样，上传完图片需要预览时，图片被蒙层遮罩住了。 下面是整个组件的代码：图片上传、预览、删除，组件方法可以直接去Element-ui官方文档查看。 <template v-slot:img_upload> <el-upload action="#" list-type="picture-card" :limit="9" :auto
根据element+vue 自定义dialog+drawer组件 弹窗+抽屉 无覆盖 + 可拖拽.7z
12-09
在这个特定的案例中，我们讨论的是如何在Element UI的基础上自定义Dialog（对话框）和Drawer（抽屉）组件，以实现无覆盖和可拖拽的功能。 Dialog组件通常用于显示临时的信息或者进行一些交互操作，而Drawer则常用于...
ElementUI：dialog的遮罩层在弹出层的上面
weixin_52890961的博客
07-20 677
ElementUI：dialog的遮罩层在弹出层的上面 以下时遇到的问题： 解决方式 <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :append-to-body='true'> <span>这是一段信息</span> <span slot="footer" class="dialog-footer"> <el-b
element-ui dialog遮罩层在最上层，关掉dialog遮罩层还在
yuxuan89814的专栏
03-20 3350
element-ui dialog遮罩层遮挡
element——弹窗
weixin_41897680的博客
12-14 8143
本来以为弹窗挺简单的，结果自己想多了。这几天的使用碰到了好多问题。 在组件中使用弹窗 <div id="app"> <el-button type="primary" @click="open=true">打开弹窗</el-button> <test :visible.sync="open" :table="tableData"></test> </div> <script type="text/javascript">
Vue 中对ElementUI的Dialog组件封装
小火车况且况且况且的博客
12-02 9180
Vue 中对ElementUI的Dialog组件封装 <el-dialog title="提示" :visible.sync="visible" :close-on-click-modal="false" @close="QualityDialogClose" > <span slot="footer" class="dialog-foo...
vue2 element 弹窗传值 小组件
zhangyubababa的博客
06-08 379
vue2 弹窗传值 小组件
vue封装elementui的弹窗组件
Jcai_0120的博客
02-22 557
【代码】vue封装elementui的弹窗组件。
vue element dialog 弹窗单独组件
小小爪哇工程师的博客
12-16 3095
大家想要单独弹窗组件，我猜测应该是对表单的提交，这里演示表单弹窗，本人后端开发，有不对的地方勿喷。这就完成了一个弹窗单独组件的实现，至于父子组件传参可自行百度$refs和prop。//这里是控制弹窗是否显示的，可以看下哪里引用到了。'上海市普陀区金沙江路 1518 弄''上海市普陀区金沙江路 1518 弄''上海市普陀区金沙江路 1518 弄''上海市普陀区金沙江路 1518 弄'//用于改变弹窗子组件是否显示的属性。
el-dialog弹出层组件
11-22
el-dialog是一个基于Element UI的弹出层组件，可以用于显示对话框、提示框、操作确认框等。它具有以下特点： - 可以自定义标题、内容、按钮等。 - 可以设置弹出层的大小、位置、遮罩层等样式。 - 可以通过v-model控制弹出层的显示和隐藏。 - 可以通过slot插槽自定义弹出层的内容。 以下是el-dialog的基本使用方法： 1. 引入Element UI库和样式文件 ```html <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> ``` 2. 创建Vue实例，并注册el-dialog组件 ```javascript Vue.component('el-dialog', ElementUI.Dialog); ``` 3. 在Vue实例中使用el-dialog组件 ```html <template> <div> <el-button @click="dialogVisible = true">打开弹出层</el-button> <el-dialog v-model="dialogVisible" title="提示" :modal-append-to-body="false"> <p>这是弹出层的内容</p> <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> new Vue({ el: '#app', data: { dialogVisible: false } }); </script> ``` 在上面的代码中，el-button是一个Element UI的按钮组件，@click="dialogVisible = true"表示点击按钮时将dialogVisible设置为true，从而显示弹出层。el-dialog是一个Element UI的弹出层组件，v-model="dialogVisible"表示控制弹出层的显示和隐藏，title="提示"表示弹出层的标题，:modal-append-to-body="false"表示不将遮罩层插入到body元素中。在el-dialog中，p标签中的内容是弹出层的主体内容，slot="footer"表示自定义弹出层的底部按钮区域，el-button是Element UI的按钮组件，@click="dialogVisible = false"表示点击按钮时将dialogVisible设置为false，从而隐藏弹出层。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值