el-dialog弹出框内容被遮罩层遮住了

最新推荐文章于 2023-05-15 17:48:22 发布
原创 最新推荐文章于 2023-05-15 17:48:22 发布 · 709 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #vue.js #开发语言

在遇到弹出内容被遮罩层遮挡的问题时，作者首先考虑了z-index的调整，但尝试无果。尽管改变了遮罩层的z-index，问题仍未解决，留下了一个悬而未决的技术挑战。

问题

在这里插入图片描述

解决办法：

**在el-dialog标签里添加 :modal-append-to-body=‘false’

看到弹出内容被遮住的我的第一想法是z-index，应该是弹出内容比遮罩层的z-index小，造成的堆叠覆盖问题，那把遮罩层的z-index变小不就好了？
兴致勃勃看元素，然后…一言难尽，怎么设置z-index都没用，后续再跟吧！

绝美焦栖
关注
element-ui使用Cascader 级联选择器遇到的问题
fangqi20170515的博客
04-11 1431
方法1：将radio隐藏，扩大选中区域，点击红色框的区域选中值，点击箭头所在蓝色框的区域，展示子选项。方法2：修改次级菜单的展开方式，默认的是‘click’，鼠标移入时展示子选项。具体为啥不知道，然后通过百度尝试了各种方法解决了这个问题。，但是这种方式，当嵌套过深的时候，体验就不是很好。
【前端Vue】el-dialog关闭后黑色遮罩依然存在如何解决？
最新发布
m0_67519714的博客
09-11 413
【摘要】开发中遇到el-dialog关闭后黑色遮罩残留问题，表现为首次打开弹窗时关闭后遮罩不消失。该问题出现在嵌套弹窗场景（大弹窗含小弹窗），官方文档未明确说明解决方案。AI建议添加:modal-append-to-body="false"属性但效果不稳定。最终通过将:append-to-body属性设置为true成功解决问题，测试未再出现遮罩残留现象。
element-ui框架的el-dialog弹出框被遮罩层挡住了
热门推荐
知行合一，跬步致远
07-02 8万+
如图： 解决办法 在el-dialog标签里添加 :modal-append-to-body='false' 实现效果： 问题解析 先来看看element-ui官网提供的属性说明文档 文档解释：翻译成大白话就是，若el-dialog弹出框设置了modal-append-to-body='true'（默认）属性，它的遮罩层就会被插入到body标签下（即与组件所在的最外层d...
解决element 新版本cascader级联选择器的各种bug
前端与计算机相关知识的分享，博主的qq523235674
01-19 2526
第一个问题：下拉框高度过长导致部分内容看不见 解决办法： 1.在浏览器中审查下拉框元素 2.在css中更改高度 .el-cascader-panel { height: 300px; } 第二个问题：圆圈文本问题 取消圆圈解决方案： .el-cascader-panel .el-radio { width: 100%; height: 100%; z-index: 10; position: absolute; top: 10px;
使用element-ui框架的el-dialog弹出框被遮罩层挡住了
zhufan2333的博客
01-26 613
Q:element-ui框架的el-dialog弹出框被遮罩层挡住了 A:在el-dialog标签里添加 append-to-body="true"（Dialog 自身是否插入至 body 元素上）
el-dialog 组件蒙层把弹框给遮住问题处理
weixin_43837268的博客
05-15 2503
z-index的设置没有问题，但z-index值大的图层反而显示在了下面。从上面两个截图可以看出，遮罩层是插入到body元素上的，而弹框却是在层级比较深的组件中，所以考虑到是受父元素影响了。审查元素得知，在弹框的父元素中，有对z-index的设置，且值小于2042。从图中可以看出，element-ui对弹框的处理，默认把遮罩层插入至了body元素上，而dialog自身没有插入至body元素。设置modal-append-to-body为false，将遮罩层插入至dialog的父元素上，弹框显示正常。
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
10-16
而`<el-dialog>`的样式则通过`.dialog-footer`来设置底部按钮的布局样式。 ### 使用外部库 文件中提到了引入外部库的操作，如Vue.js、Element UI以及jQuery。在实际开发中，通常需要引入这些外部库来支持Vue实例的...
遮罩层弹出半透明dialog
02-27
遮罩层弹出半透明dialog,很fashion。
el-dialog-----弹出层拖拽、双击全屏
weixin_45102212的博客
04-26 831
弹出框要求添加拖拽和双击头部全屏 1、创建js import Vue from 'vue' // v-dialogDrag: 弹窗拖拽属性 （重点！！！ 给模态框添加这个属性模态框就能拖拽了） Vue.directive('dialogDrag', { //属性名称dialogDrag，前面加v- 使用 bind(el, binding, vnode, oldVnode) { //弹框可拉伸最小宽高 let minWidth = 400 let minHeight = 3
el-dialog 遮罩层覆盖内容的问题
weixin_53474595的博客
02-16 796
做项目的时候用了el-dialog,发现弹窗内容也被遮罩层给覆盖了，用z-index设置也没有用。解决方法：:append-to-body="true"，加上这个终于可以了。
element-ui的el-dialog对话框被遮罩层挡住了
weixin_45899022的博客
04-22 1807
element-ui的el-dialog对话框被遮罩层挡住了 解决：在el-dialog标签里添加 **:modal-append-to-body=‘false’**就可以了 文档:https://element.eleme.cn/#/zh-CN/component/dialog ...
element-ui框架的el-dialog弹出框被遮罩层挡住
l1002670137的博客
09-03 1899
element-ui中弹出框被遮罩层挡住
element-ui 遮罩层el-dialog 中间内容被被蒙板遮住 解决
AdleyTales的技术博客
11-19 8330
原因： Dialog 的外层布局的 position 值为 fixed, absolute, relative 三者之一时，就会出现被蒙板遮住的情况。 解决： // 在 el-dialog 标签里添加 :append-to-body=&quot;true&quot; &amp;lt;!-- 编辑弹出框 --&amp;gt; &amp;lt;el-dialog title=&quot;添加用户&quot; :visible.sync=&a
【el-dialog】解决同一组件使用俩个el-dialog，内容被遮罩层覆盖的问题
票票的博客
02-28 6729
出现问题如下，内容被遮罩层覆盖 如果需要在一个 Dialog 内部嵌套另一个 Dialog或者同一组件有多个Dialog时，需要使用 append-to-body属性。
element-ui 的Dialog被蒙板遮住原因及解决办法
weixin_34239592的博客
07-06 1751
用 element-ui 时遇到一个问题，弹出的 dialog本来应该在半透明蒙板上层显示，但不知怎么跑到了蒙板下面，被遮住了。 查了一些资料，得知如果 Dialog 的外层布局的 position 值为 fixed, absolute, relative 三者之一时，就会出现被蒙板遮住的情况。 解决办法很简单，查看 element 的 官方文档 在 el-dialog 标签里添加下面两行代码的...
vue+elementUI项目中，el-dialog弹出框被遮罩层覆盖
07-23 867
如： 解决方法： 在el-dialog标签里添加 :modal-append-to-body='false’ :modal-append-to-body='false'
“el-dialog弹出框被遮盖层挡住”解决办法
qq_27474555的博客
04-06 4266
“el-dialog弹出框被遮盖层挡住”解决办法 在el-dialog标签里添加 :modal-append-to-body='false'
el-dialog弹出框有滚动条
09-01
是的，el-dialog弹出框可以包含滚动条。你可以通过设置CSS样式或使用el-dialog组件提供的属性来实现这一效果。 如果你希望在弹出框内容过长时出现滚动条，可以在el-dialog组件上添加一个样式属性，例如： ```html <el-dialog :visible="dialogVisible" class="dialog-with-scroll"> <!-- 弹出框内容 --> </el-dialog> <style> .dialog-with-scroll .el-dialog__body { overflow-y: auto; } </style> ``` 这样即可在弹出框内容超出弹出框高度时显示垂直滚动条。 另外，你还可以使用其他el-dialog组件提供的属性来实现滚动条的显示和隐藏，例如： ```html <el-dialog :visible="dialogVisible" :height="dialogHeight" :before-close="beforeClose"> <!-- 弹出框内容 --> </el-dialog> ``` 其中，`:height`属性可以设置弹出框的高度，当内容超出该高度时会出现滚动条。`:before-close`属性可以在关闭弹出框前执行一段逻辑，你可以在这里重置弹出框的高度。 希望以上信息能对你有所帮助！如有其他疑问，请继续提问。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值