element-ui 的Dialog被蒙板遮住原因及解决办法

墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 1.9w累计阅读 1.9w+平均单平台已同步平台 CSDN 微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 → 码龄8年

关注

原创最新推荐文章于 2025-11-07 16:23:20 发布 1.9w 阅读 AI 写同款· GEO 优化 ›

影像组学分析流程中，图像分割前要做的事（图像预处理）在InputVolume中无法找到自己想要重采样的序列，这时可以检查一下序列的Volume type是不是MRMLMulti。这时，Volume type将由MRMLMulti改为Scaler，随后即可在3D slicer中完成Resample Scaler Volume。2.1、重采样：通过3Dslicer中的Resample Scaler Volume实现。具体设置参数：spacing（1，1，1），Interpolation选择Bspline。2、图像预处理：重采样和标准化。阅读详情

用 element-ui 时遇到一个问题，弹出的 dialog本来应该在半透明蒙板上层显示，但不知怎么跑到了蒙板下面，被遮住了。

查了一些资料，得知如果 Dialog 的外层布局的 position 值为 fixed, absolute, relative 三者之一时，就会出现被蒙板遮住的情况。

解决办法很简单，查看 element 的官方文档

这里写图片描述

在 el-dialog 标签里添加下面两行代码的任意一行：

 :modal-append-to-body='false'
 或
 :append-to-body='true'

代码如下

<el-dialog
    title="登录"
    :visible.sync="dialogVisible"
    top="20vh"
    width="30%"
    :append-to-body="true">
</el-dialog>

收录于

前端

当前文章被收录于：

前端

17 篇文章 1 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

标签

#Element #Dialog #遮挡

本内容遵循 CC 4.0 BY-SA 版权协议

记录:element 的dialog嵌套问题，第二次弹出的会被遮住，怎么解决?【亲测有效】阅读详情

相关推荐

从0入门LocoTrack：6倍加速的SLAM追踪新范式实战指南

传统点追踪方法（如CorrTracker、TAPIR）在处理大规模场景或实时任务时，要么精度不足，要么速度太慢。而LocoTrack通过“局部4D相关性”和“Transformer全局关联”的创新设计，实现了精度与速度的双重突破速度：比现有SOTA方法快6倍，吞吐量高达数万点/秒；精度：在Kinetics、DAVIS等数据集上，定位误差显著低于传统方法；鲁棒性：能应对低纹理、动态场景等复杂环境，这是传统方法的“噩梦场景”。

m0_71589036的博客 70

el-dialog 组件蒙层把弹框给遮住问题处理

z-index的设置没有问题，但z-index值大的图层反而显示在了下面。从上面两个截图可以看出，遮罩层是插入到body元素上的，而弹框却是在层级比较深的组件中，所以考虑到是受父元素影响了。审查元素得知，在弹框的父元素中，有对z-index的设置，且值小于2042。从图中可以看出，element-ui对弹框的处理，默认把遮罩层插入至了body元素上，而dialog自身没有插入至body元素。设置modal-append-to-body为false，将遮罩层插入至dialog的父元素上，弹框显示正常。

weixin_43837268的博客 2556

STM32实现SD卡的fatfs文件系统，写数据生成.csv文件.rar

element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住

参考我的这篇文章,但是在后面我发现只要是会生成v-model元素的饿了么组件,在使用的过程中都可能出现整个页面被遮罩层挡住的情况,解决方法其实都一样.element-ui框架的el-dialog弹出框被遮罩层遮挡问题_前端李十三的博客-CSDN博客。element-ui框架的el-dialog弹出框被遮罩层遮挡问题_前端李十三的博客-CSDN博客。可以发现el-dialog 组件显示的时候被遮罩层挡住了。可以发现el-dialog 组件显示的时候被遮罩层挡住了。

李十三的博客 2389

element-ui框架的el-dialog弹出框被遮罩层挡住了

如图： 解决办法 在el-dialog标签里添加 :modal-append-to-body='false' 实现效果：问题解析先来看看element-ui官网提供的属性说明文档文档解释：翻译成大白话就是，若el-dialog弹出框设置了modal-append-to-body='true'（默认）属性，它的遮罩层就会被插入到body标签下（即与组件所在的最外层d...

知行合一，跬步致远 8万+

element中dialog遮罩层覆盖弹框问题

使用的element-UI这个库时使用 <el-dialog></el-dialog> 时对话框时发现弹窗被遮盖层覆盖只需要为<el-dialog>加入append-to-body="true"就可以解决此问题官方文档:

2201_75474092的博客 883

element-ui 遮罩层el-dialog 中间内容被被蒙板遮住解决

Dialog 的外层布局的 position 值为 fixed, absolute, relative 三者之一时，就会出现被蒙板遮住的情况。解决： // 在 el-dialog 标签里添加 :append-to-body="true"  <el-dialog title="添加用户" :visible.sync="editVisi...

易之晓的博客 3754

element-ui dialog（多弹框、嵌套弹框）被蒙版遮住

我的情况是，在一个弹框中，点击按钮再弹出了一个弹框，第二个弹框被蒙层遮住了。看官方文档，查阅了下资料https://element.eleme.cn/#/zh-CN/component/dialog 发现dialog下面有两个属性，试了下，解决了问题 ...

qq_35430000的博客 8714

element的嵌套dialog，在打开第二个dialog的时候会被遮罩层遮住

element嵌套dialog遮罩层的问题做项目的时候遇到一个问题，在一个弹出层的内容区做处理打开另一个弹出层时，第二个弹出层会被遮罩层遮住，点击五次之后遮罩层关闭。然后才发现，element 的dialog嵌套问题，之所以第二次弹出的会被遮住，是因为没有给定 append-to-body。正常情况下，我们不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它...

斑斓小星愿的博客 1万+

vue element-ui的嵌套dialog遮罩层

vue element-ui的嵌套dialog遮罩层打开dialog时，遮罩层直接将全部body遮住内嵌dialog关闭时父级dialog依旧被遮罩层遮住自己做项目时需要用到嵌套dialog，但是遮罩层的问题踩了2次坑，自己解决办法如下打开dialog时，遮罩层直接将全部body遮住这里需要加一句 :modal-append-to-body=‘false’ 就可以解决遮罩层罩住整个body...

weixin_43823766的博客 1万+

element-ui dialog被蒙版遮住的解决方法

Dialog 的外层布局的 position 值为 fixed, absolute, relative 三者之一时，就会出现被蒙板遮住的情况。在 el-dialog 标签里添加下面两行代码的任意一行： :modal-append-to-body=‘false’ :append-to-body=‘true’ ...

qq_26642611的博客 1405

ElementPlus使用多级弹窗（Dialog）出现蒙版遮罩问题

ElementPlus使用多级弹窗遮罩

qq_33225414的博客 1560

如何解决el-dialog弹窗上面有一层黑色蒙层？

Dialog 的场景，我们提供了append-to-body属性。将内层 Dialog 的该属性设置为 true，它就会插入至 body。正常情况下，我们不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它们平级放置。这种情况百分之90%是因为弹窗嵌套弹窗造成的，我遇到的情况是这样的，解决方法是给内层el-dialog加上。如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 append-to-body 属性。属性，下面是简化后的示例。