el-dialog出现在下层(遮罩下)解决

已于 2022-04-04 21:59:19 修改
阅读量2.2k 收藏
点赞数 2
文章标签： vue.js elementui javascript
于 2022-03-14 19:25:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/super_hzj/article/details/123486073
版权
本文介绍了如何解决Vue中使用Element UI组件库时，el-dialog对话框出现下层（遮罩下）的常见问题。通过在el-dialog组件上添加'append-to-body'属性，可以确保对话框正确地显示在顶部，不再被遮罩层覆盖。这是一个关于Vue.js和前端UI组件开发的实用技巧。
摘要由CSDN通过智能技术生成

el-dialog出现在下层(遮罩下)解决

<el-dialog :visible.sync="quitDialogVisible" width="30%" center title="退出登录"> 
	<span class="quitMsg">是否确定退出登录？</span>
	<span slot="footer" class="dialog-footer">
		<el-button @click="quitDialogVisible = false">取 消</el-button>
		<el-button type="primary" @click="quitOut">确 定</el-button>
	</span>
</el-dialog>

<el-dialog :visible.sync="quitDialogVisible" width="30%" center title="退出登录" append-to-body> 
	<span class="quitMsg">是否确定退出登录？</span>
	<span slot="footer" class="dialog-footer">
		<el-button @click="quitDialogVisible = false">取 消</el-button>
		<el-button type="primary" @click="quitOut">确 定</el-button>
	</span>
</el-dialog>

在这里插入图片描述
如上面的代码 加上 append-to-body 就能解决！ 没加 他就显示在遮罩层下

Figure Out !

或者活着就已经很开心啦
关注
vue dialog嵌套，遮罩层遮盖住对话框的解决方法
且听风吟的博客
09-03 6809
官方文档中的嵌套dialog例子指出了： 页面效果如下：
【vue】vxe-table在el-dialog弹出框中，编辑下拉框、日期时，会层级不够有遮蒙层问题
m0_63834711的博客
11-18 2376
下拉框给弹窗遮住，内容过长；鼠标悬停其内容没显示内容主要原因：edit-render="{name: '$input'}" 或者 :edit-render="{name: '$select'}"，反正带有$的就是动态显示的，就会被遮罩层遮住
el-dialog取消遮罩层，支持拖拽，底部内容可操作
最新发布
Juihui822的博客
08-19 335
注意：样式的 my-dialog-class需要与属性 modal-class绑定的值保持一致....操作好上面两步，应该就实现功能啦~
element-ui框架的el-dialog弹出框被遮罩层挡住了，vue-element-ui弹出框和el-select层级混乱
qq_42483780的博客
08-20 5019
Element ui中弹出框、Select 选择器等等弹出被遮盖的问题处理方法 这种问题一般出现在有多个弹出框、弹出框上有select选择器这两种情况。两种情况不同的处理方式如下： 情况A：有多个弹出框，你想要的效果可能是 页面->弹出框A->弹出框B，但是实际上出现的是 页面->弹出框B->弹出框A 如图所示。图是在网上找的 遇到这种情况不要慌，可以在el-dialog标签里添加 : modal-append-to-body=‘false’ 参数：modal-append-to-b
element-ui 两层dialog，第二层dialog里面的el-select下拉选项被遮盖住了
jingzhuo3185的博客
06-09 5420
element-ui 两层dialog，第二层dialog里面的el-select下拉选项被遮盖住了 问题描述：在同一个页面内，弹出两个dialog，第二个dialog在第一个dialog上方。第二个dialog里面是个form表单，表单里的el-select组件下拉选项被遮盖住了。 解决思路：下拉框z-index层级太低，所以需要修改下拉框的z-index。 但是直接在el-select添加样式，是不会对下拉框有影响的，还好我们在element-ui官网看到el-select 有popper-clas
elementUI中对话框el-dialog遮罩层问题（遮罩层在内容上面）
weixin_61397543的博客
11-09 1279
【代码】elementUI中对话框el-dialog遮罩层问题（遮罩层在内容上面）
Vue2+Elementui Message弹窗在Modal遮罩层下面解决方案
朝花夕拾的博客
03-12 295
main.js里面页面使用。
element-ui的el-dialog组件内容在阴影下面
Xue_BT的博客
03-15 2507
只需在 el-dialog 标签上添加上以下代码即可 :append-to-body="true"
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
在使用Element-UI框架开发前端应用时，遇到的一个常见问题是关于`el-dialog`对话框的初始化校验问题。`el-dialog`是Element-UI提供的一个模态对话框组件，它通常与`el-form`结合使用，用于数据输入和验证。然而，当...
elementui更改el-dialog关闭按钮的图标d的示例代码
10-15
在某些设计需求下，可能需要自定义`el-dialog`的关闭按钮图标以符合特定的品牌风格或者交互体验。本篇文章将详细讲解如何更改`el-dialog`关闭按钮的图标。 首先，让我们了解`el-dialog`的基本结构。`el-dialog`的...
element ui 对话框el-dialog关闭事件详解
08-27
在 Element UI 中，`el-dialog` 是一个非常重要的组件，它用来创建对话框或者称为模态窗口，常用于显示警告、确认操作或者进行表单输入等场景。 `el-dialog` 的关闭事件是开发过程中经常会用到的功能，特别是在需要...
Vue项目element-ui弹窗组件el-dialog，阻止点击遮罩层关闭
m0_38109616的博客
12-01 1961
Vue项目element-ui弹窗组件el-dialog，阻止点击遮罩层关闭
el-dialog被挡住了，不在最高层，z-index：999无效
Salt_NaCl的博客
02-14 3089
在dialog的组件内加上这段代码 :append-to-body=“true”；或者:modal-append-to-body=“false” 即可解决
element-plus dialog对话框去掉覆盖层、并可操作底层的按钮
weixin_44442674的博客
03-26 816
加载cesium时，地球出现后不能操作，刚开始以为cesium引用出现问题，控制台也没报错，最后发现时引用的element-plus抽屉组件存在遮罩层的原因。由于抽屉组件存在遮罩层，虽然设置:modal="false"不显示遮罩层，但是遮罩层只是变为透明，但是仍然存在，点击事件失效。查看元素，遮罩层没有类名，添加自定义类名 modal-class="drawer"，网上找的css样式应用后不起作用。最后发现是因为局部样式造成的样式不起作用，使用样式穿透，问题解决。
vue3+element-plus中dialog对话框组件去掉遮罩层后可以操作底层页面，以及弹窗嵌套弹窗如何去掉遮罩层且可以操作底层页面
liuzaixi的博客
03-18 2445
三、如果是弹窗嵌套弹窗，以上方法可能不会去掉遮罩层，这时就需要添加官网给出的另一个属性：append-to-body，具体解释可以查看官网。是自定义类名，和下面代码中的类名相同即可。
解决:Element Ui 的dailog中存在tinymce富文本编辑器时，tinymce弹窗图层在dialog下面问题
m0_63503465的博客
05-16 1110
解决dialog与tinymce图层问题
elementUi el-dialog 对话框实现可拖拽、去掉覆盖层、并可操作底层的按钮
热门推荐
weixin_44379204的博客
06-24 1万+
一、对话框实现可拖拽功能 实现方法：vue的指令 使用方法： 1、将下列drag.js文件放入代码库中； 2、在main.js中引入上述drag.js文件； import 'src/libs/drag.js'; 3、在el-dialog组件中加上指令 <el-dialog v-dialogDrags :visible="dialogShow" > </el-dialog> src/libs/drag.js import Vue from 'vue'; /* * 使
ElementUI e-dialog 弹出框可以编辑底部输入框 去掉遮罩层
朝花夕拾的博客
07-29 2252
1、去掉e-dialog遮罩层modal="false"2、弹出modal仍然可以编辑底部输入框。
ant-vue1.78版监听a-modal遮罩层的滚动事件
m0_52313178的博客
08-28 702
我们可以看到弹框过大，右侧已经出现了滚动条，然后左边的下拉框由于随着遮罩层滚动条的滚动，下拉项的列表脱离了原有的位置，就很丑，没有跟随下拉菜单移动，这也许是ant的缺陷，这个时候我们需要监听遮罩层的滚动，及时的让下拉菜单失焦就可以解决这个问题，由于页面加载时弹框是没有出现的，明显是没有遮罩层的我们监听不到，监听时机很重要，上代码。我们开发过程中经常有遇到监听页面滚动的事件需求，去做一些下拉加载或者是下拉分页的需求，我们直接在vue的生命周期中去绑定事件监听非常的方便，但如果是弹框的遮罩层的滚动监听呢？
el-dialog怎么使用局部遮罩层
05-17
el-dialog 是 element-ui 提供的对话框组件，可以使用局部遮罩层来实现在弹窗打开时，背景部分被遮挡，从而减少用户的干扰。具体实现方式如下： 在 el-dialog 中添加属性 v-loading 和 :loading-text ，如下所示： ``` <el-dialog v-loading="loading" :loading-text="'拼命加载中...'" title="提示" :visible.sync="dialogVisible"> <p>这是一段内容...</p> </el-dialog> ``` 其中，v-loading 绑定了一个变量 loading ，控制局部遮罩层的显示和隐藏。:loading-text 属性设置了局部遮罩层显示时的文本提示。 在相关代码中，可以通过改变 loading 变量的值来控制局部遮罩层的显示和隐藏。例如： ``` data() { return { dialogVisible: false, loading: false } }, methods: { showDialog() { this.loading = true; setTimeout(() => { this.loading = false; this.dialogVisible = true; }, 2000); } } ``` 在上述代码中，首先将 loading 变量设置为 true，从而显示局部遮罩层；接着使用 setTimeout 函数延迟 2 秒，将 loading 变量设置为 false，从而隐藏局部遮罩层，并打开对话框。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值