element-UI 弹出组件的遮罩层在弹出层dialog模态框的上面 解决方法

最新推荐文章于 2023-12-13 18:58:31 发布
最新推荐文章于 2023-12-13 18:58:31 发布
阅读量2.5k 收藏 3
点赞数 2
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fxhani/article/details/105118338
版权

关于element 里 Dialog 对话框 组件 遇到的问题

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

在这里插入图片描述

造成的原因： 因为dialog的组件外层div设置了 position：absolute； 属性所以导致遮罩层会在最上面。

解决方法： 1. 在属性内加上这段代码 :append-to-body=“true” ； 2 ，:modal-append-to-body=“false” 也可以

在这里插入图片描述

Fxhani
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element-ui难点 深度穿透，模态框弹出商品添加，到主页面，模态框把商品删除，放到主页面
leopardpig的博客
06-30 245
今天做项目碰到一个小需求就是要给模态框的顶部加上蓝色的框(模态框是白色的)但是客户要求使用element-ui来写，所以只能用element-ui给的模态框上来是这个样子的这是给模态框设置了头部为蓝色之后，模态框会带一圈白边但是客户要求是这样子的:本人试了好多方法来去掉模态框的边框发现不行。
vue使用Element-ui el-dialog弹出层
aaaaaaddddsssss的博客
02-21 1121
点击添加歌手 弹出 <template> <div class="table"> <div class="container"> <!-- 添加歌手按钮 --> <div class="handle-box"> <el-button type="primary" size="mini" @click="centerDialogVisable=true">添加歌手</el-.
element-ui弹出组件的遮罩层在弹出层el-dialog的上面
Bling Bling ~~
07-23 3699
今天又遇到了这个问题，之前遇到过一次，但是没有记录，今天刚好记录下，增加下记忆 加完 问题：加完el-dialog后，测试发现，遮罩层在弹出层上面。 解决办法： 1、给el-dialog的父元素添加z-index属性，一定要比遮罩层的大 z-index：2000//此为样例 2、如果第一个办法还是不能解决，我们就用第二个办法。 出现这个状态的原因： 可以检查下我们的代码布局样式，在dialog的组件外层div我们设置了 position：absolute 属性，这个属性导致遮罩层会在最上面。 解决办法：
element-ui框架的el-dialog弹出框被遮罩层挡住了
热门推荐
知行合一，跬步致远
07-02 7万+
如图： 解决办法 在el-dialog标签里添加 :modal-append-to-body='false' 实现效果： 问题解析 先来看看element-ui官网提供的属性说明文档 文档解释：翻译成大白话就是，若el-dialog弹出框设置了modal-append-to-body='true'（默认）属性，它的遮罩层就会被插入到body标签下（即与组件所在的最外层d...
element-ui的el-dialog的遮罩层在模态框的前面bug
Jkssns的博客
12-01 1398
本来吧，俺是不屑于发这种解决小bug的博客，但一想，俺可是把知识洒向人间的天使，我管他有用没用呢。是一坨屎俺也要塞进别人的脑袋里。 原因： 是因为遮罩层插入进了body标签下，z-index高于当前父元素。 解决：在el-dialog标签里加上:modal-append-to-body="false"就可以了。 ...
element ui 弹出组件的遮罩层在弹出层的上面的解决方法
nddjava的专栏
05-17 419
el-dialog title="收货地址" :visible.sync="dialogFormVisible" :modal-append-to-body="false">
项目中elementUI的dialog遇到的小bug 点击遮罩层不会关闭
weixin_43550660的博客
11-26 4323
项目中elementUI的dialog遇到的小bug 点击遮罩层不会关闭 bug : 点击项目中elementUI的dialog遇到的小bug 点击遮罩层不会关闭 bug 原因： 因为自己在 dialog 加了样式，导致其不能正常关闭， 解决办法：将自己样式删除，采用下面的居中样式（因为能满足我的需求了） 饿了么UI框架中的说明： 将center设置为true即可使标题和底部居中。center仅影...
dialog弹窗关不掉 vue_elementUI弹窗之坑（dialog的遮罩层在弹出层的上面，子弹窗执行保存（确定）按钮之后还要执行取消按钮，Prop being mutated: "showTre...
weixin_30539747的博客
12-24 3433
本文主要解决elementUI弹窗嵌套中的坑,笔者在给同事解决难听过程看到了三个问题：弹窗套弹窗出现蒙层、弹窗套弹窗，子弹窗执行保存(确定)按钮之后还要执行取消按钮、弹窗自带关闭x按钮报错[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent compone...
组件element------Notice组件
weixin_45343884的博客
08-08 671
（1）Alert 警告 基本用法----Alert 组件提供四种主题，由type属性指定，默认值为info。 <template> <el-alert title="成功提示的文案" type="success"> </el-alert> <el-alert title="消息提示的文案" type="info...
ElementUI+Vue 解决在使用el-dialog时，点击el-dialog外的其他区域会导致该对话框关闭
weixin_41697323的博客
12-03 5083
需求描述 今天，在做Element+Vue项目时遇到一个需求：甲方要求在Dialog打开状态下，点击该Dialog以外的区域会导致该Dialog关闭；正确的状态应该是只有在点击关闭按钮，或者是Dialog内的其他操作性按钮才能使得Dialog的状态变为关闭。 弹窗关闭后还显示一层遮罩层，设置append-to-body即可 问题分析 之所以会产生这种问题，是因为elementUi在...
elementui 弹出框有黑层
08-18
Element UI 是一套基于 Vue.js 的前端组件库，其中的弹出框（Dialog）组件默认会有一个黑色的半透明遮罩层。这个遮罩层的作用是在弹出框打开后，覆盖在页面上，防止用户操作其他区域，提供更好的用户体验和交互效果...
el-dialog 右下角弹出
最新发布
07-26
`el-dialog` 是 Element UI 框架提供的一种模态对话框组件，它可以在页面上显示弹出式的内容。在 Vue.js 应用程序中，`el-dialog` 的右下角通常会有关闭按钮用于直接关闭对话框。 ### `el-dialog` 的基本结构 基本...
ElementUI：dialog的遮罩层在弹出层的上面
weixin_52890961的博客
07-20 652
ElementUI：dialog的遮罩层在弹出层的上面 以下时遇到的问题： 解决方式 <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :append-to-body='true'> <span>这是一段信息</span> <span slot="footer" class="dialog-footer"> <el-b
解决elementui关闭子弹窗，遮罩层挡住父弹窗问题
m0_69853343的博客
12-13 659
1.在父弹窗中设置 :modal-append-to-body="false" 和 :append-to-body="true"2.在子弹窗中设置 :append-to-body="true"
elementUI 让Notification组件弹出到最上层
小白菜的博客
12-22 3235
问题描述： 在使用dialog对话框等有modal遮罩层的组件时，再使用Notification通知组件便会遇到，遮罩层把通知掩盖住了 @Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget(); } 原因分析： 提示：这
解决Element中点开Dialog 对话框灰布在最上层的方法
weixin_46533954的博客
07-19 3199
解决Element中点开Dialog 对话框灰布在最上层的方法 解决Element中点开Dialog 对话框灰布在最上层的方法 append-to-body： Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true 设置属性 :append-to-body='true’即可让对话框在最上层，灰布在它的下面 <el-dialog title="付款信息" :visible.sync="centerDialogVisible"
关于Vue + element 中 message提示被dialog的遮罩层挡住问题
HHaox_x的博客
04-19 2506
message提示信息 提升到当前页面最高
解决elementui多层dialog弹窗遮罩问题
Let_me_tell_you的博客
06-07 3442
多层弹窗，会出现遮罩问题，需要鼠标点击一下才能进入当前顶层弹窗正常使用状态。效果图如下：解决办法：在弹窗代码上加上 解决问题。
element ui中需要弹出框在加载动效的上层
l1002670137的博客
03-28 399
尝试用deep穿透加z-index但是样式适中贴不上去，研究后可以给弹框一个自定义类标签，然后在App.vue全局中加样式更改。若加载时需要弹框显示，两个组件共同使用时就会遇到，加载动效盖在了弹框的上面。
element-ui Dialog 遮罩层相互影响
08-26
你好！关于Element UI Dialog遮罩层相互影响的问题，我可以给你一些解决方案。首先，Element UI Dialog组件默认会创建一个遮罩层来阻止用户与页面上其他元素进行交互。如果同时打开多个Dialog组件，它们之间确实可能会出现遮罩层相互影响的问题。 一种解决方法是手动控制Dialog组件的遮罩层。你可以使用`append-to-body`属性将Dialog组件的遮罩层添加到body元素上，而不是父级元素。这样做可以确保每个Dialog组件有自己独立的遮罩层，互相之间不会产生影响。示例代码如下： ```html <el-dialog :visible.sync="dialogVisible" append-to-body> <!-- 对话框内容 --> </el-dialog> ``` 另一种解决方法是使用`z-index`属性手动设置每个遮罩层的层级。你可以为每个Dialog组件设置不同的`z-index`值，确保它们在层级上互不重叠。示例代码如下： ```html <el-dialog :visible.sync="dialogVisible" :z-index="100"> <!-- 对话框内容 --> </el-dialog> ``` 你可以根据具体情况选择适合的解决方案来解决Element UI Dialog遮罩层相互影响的问题。希望对你有所帮助！如果你有任何其他问题，可以继续问我。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值