fixed导致子元素本该显示的el-dialog弹框被遮罩层覆盖的解决办法

最新推荐文章于 2024-05-06 16:01:19 发布
最新推荐文章于 2024-05-06 16:01:19 发布
阅读量1.0k 收藏
点赞数 1
文章标签： vue css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/NGLLLLLL/article/details/118632728
版权

fixed导致子元素本该显示的el-dialog弹框被遮罩层覆盖的解决办法

最近由于项目需要给el-table固定表头，于是就给el-table-column添加了fixed属性，表头成功固定，但是el-dialog弹框却被覆盖了，呜呜呜~
在这里插入图片描述

解决办法：父元素设置成固定定位时，子元素弹出框设置:modal-append-to-body='false’即可
若el-dialog弹出框设置了modal-append-to-body=‘true’（默认）属性，它的遮罩层就会被插入到body标签下（即与组件所在的最外层div同一层级）
最后完美解决
在这里插入图片描述

unIqueGsl
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-dialog嵌套遇到的问题
梅花寺
05-25 4765
前言 最近在弄PC端的管理平台，然后使用的是vue + elementUI。今天把遇到的问题总结下，正所谓，好记性不如烂笔头。 el-dialog嵌套 我们的业务需求需要嵌套dialog，正常打开第一个dialog是没有没问题的。 页面有蒙层，然后内容区域高亮 如下图 但是打开嵌套的dialog后蒙层盖住了整个页面，导致内容区域也被盖住了。 然后我去查看文档，查看页面dom结构就知道大致原因了。 这是因为dialog的蒙层默认都是插入到body的，然后它的z-index是动态生成，默认是2000，内容区
使用el-dialog遇到的坑——append-to-body
热门推荐
syx_cainiao的博客
11-27 3万+
场景：一个list展示列表，点击每条列表信息的详情按钮，可以弹出el-dialog弹出框用来展示信息详情。 我在给详情页面内容添加el-scrollbar滚动条时，无论怎么该都不出效果
position：fixed导致子元素本该显示的el-dialog弹框被遮罩层覆盖的解决办法
yh8899abc的博客
04-27 2511
最近vue项目中为了使header与sidebar部分固定不动，只有main主体部分内容滚动，于是给main部分加上了固定定位position：fixed，overhidden：scroll .app-main { height: 100%; position: fixed; overflow: scroll; } 导致main主体部分子元素dialog弹出框被遮罩覆盖的...
el-dialog固定头部与底部，中间内容滑动
最新发布
weixin_69890748的博客
05-06 534
el-dialog固定头部与底部，中间内容滑动
el-dialog窗口中绝对定位子元素被遮挡问题解决
hahahahha111的博客
01-21 2406
el-dialog窗口中绝对定位子元素被遮挡问题解决 1.背景：el-dialog中使用了表单，表单校验信息不采用显示在输入框下方的方式，而是自定义一个组件来显示在标签上方（类似el-poppver），其使用了绝对定位； 2.现象：第一行表单元素（两个输入框，标签位置为top），当校验信息(显示于标签之上)为换行显示时，好像被el-dialog__header遮挡了，不能显示完全，因此力求可以显示完整的方法； 3.探索之路：网上搜解决绝对定位div子元素被遮挡的方法，均是父元素层级太低或父元素未设置posi
element 表格 使用fixed无效
weixin_49261425的博客
07-02 3599
/*设置overflow*/ /deep/ .el-table__body-wrapper{ overflow: auto; } /*表头和内容给一个固定宽度*/ /deep/ .el-table__header{ width: 1918px !important; } /deep/ .el-table__body{ width:1900px !important; } /deep/ .el-table__footer{ width: 1918px !important; } 如何有滚动.
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
在使用Element-UI框架开发前端应用时，遇到的一个常见问题是关于`el-dialog`对话框的初始化校验问题。`el-dialog`是Element-UI提供的一个模态对话框组件，它通常与`el-form`结合使用，用于数据输入和验证。然而，当...
父页面显示遮罩层弹出半透明状态的dialog
09-04
在网页设计中，创建一个父页面显示遮罩层并弹出半透明状态的dialog是常见的交互效果，这种设计可以提供用户友好的体验，使他们能够专注于当前操作而不会被其他页面元素分心。Dialog（对话框）通常用来展示重要的信息...
elementui更改el-dialog关闭按钮的图标d的示例代码
10-15
在Element UI框架中，`el-dialog` 是一个用于创建弹出式对话框的组件，它在用户界面中常用于显示重要信息或者进行确认操作。在某些设计需求下，可能需要自定义`el-dialog`的关闭按钮图标以符合特定的品牌风格或者...
element ui 对话框el-dialog关闭事件详解
08-27
在 Element UI 中，`el-dialog` 是一个非常重要的组件，它用来创建对话框或者称为模态窗口，常用于显示警告、确认操作或者进行表单输入等场景。 `el-dialog` 的关闭事件是开发过程中经常会用到的功能，特别是在需要...
Jquery：如何让子窗口的div显示在父窗口之上
代码技巧
06-18 3248
leftiframe中的jQuery操作mainiframe的内容someID的内容
transform父元素对fixed子元素的影响
Jayant89的博客
11-20 1774
在应用了属性transform的父元素上，若其拥有fixed属性的子元素，则该子元素的fixed属性讲失效，并将以其父元素为定位基准 详情请看例子： <!DOCTYPE html> <html> <head> <title></title> </head> <style> .outer { over
Element表格设置fixed后popover弹出窗图表无法显示
qsya的博客
07-13 1235
场景： element表格点击操作列，弹出窗显示图表信息。 分析： echarts图表一般定义一个div，然后通过id初始化，渲染图表数据。我们可以通过一个currentId元素控制dom的唯一。 //dom <el-table-column label="操作"> <template slot-scope="scope"> <el-popover placement="left" :width="
element-ui dialog 对话框局部显示（不全屏遮罩）
A_lexzanda的博客
03-22 5522
问题一：遮罩覆盖住了对话框 设置 modal-append-to-body 或者 append-to-body 属性为false <el-dialog title="新增对话框" width="80%" :modal-append-to-body='false' :append-to-body="false" :center="true" > </e
elementUI table fixed设置后，表格无法对齐，滚动条被覆盖.完美解决方案
AKA多个A的博客
08-18 2540
给css加上这几条就可以完美解决 第一个calc-10px如果不够可以自己调。想必大家给elementUI的表格设置固定列后都会出现这种情况。
element-ui框架的el-dialog弹出框被遮罩层挡住了
qq_35592856的博客
04-12 2344
element-ui框架的el-dialog弹出框被遮罩层挡住了 el-dialog的父级元素确实设置了position:fixed，并且其z-index比弹出框的遮罩层的小，所以就会出现遮罩层把内容挡住的问题。 解决方案 1、给el-dialog设置modal-append-to-body=“false”，使遮罩层插入至 Dialog 的父元素上。（推荐） 2、给position:fixed的父...
fixed定位失效问题如何解决
qq_43680154的博客
08-26 1962
如何解决fixed定位的问题
实现iframe嵌套的子页面弹出框覆盖父页面案例
三日沐水
05-31 1万+
我最近开发一个项目需要用到window弹出框，前台涉及到了eaysui框架，查看了api只是告诉你window("open")和window("close"),但是打开的只是子页面里面的弹框，因此我想把这个方法记录下来。第一点：要给父iframe页面一个&lt;div id="parentWindow"&gt;&lt;/div&gt;第二点：在你的子页面里面来获取到这个父页面的对象获取方法是： v...
element-ui 遮罩层el-dialog 中间内容被被蒙板遮住 解决
AdleyTales的技术博客
11-19 8165
原因： 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
解决element UI中 select下拉框 el-select-dropdown el-popper超出el-dialog弹框的问题
07-28
在Element UI中，如果在el-dialog弹框中使用el-select下拉框，有时会遇到下拉框超出弹框的问题。这个问题可以通过设置弹框的`z-index`和下拉框的`popper-append-to-body`属性来解决。 首先，给el-dialog设置一个较大的`z-index`值，以确保弹框位于其他元素之上。例如： ```css .el-dialog { z-index: 9999; } ``` 接下来，在el-select下拉框中添加`popper-append-to-body`属性，并将其设置为`false`，这样下拉框就不会被追加到body元素中，而是保持在el-dialog内部。例如： ```html <el-select popper-append-to-body="false"> <!-- 下拉框的选项 --> </el-select> ``` 通过以上两步操作，应该能够解决el-select下拉框超出el-dialog弹框的问题。试试看吧！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值