今天写页面的时候发现打开一个el-dialog时,上面覆盖了一层遮罩层,如下: 发现原因是el-dialog的父元素设置的position是absolute 解决办法:加上一行:append-to-body="true" 参考https://blog.csdn.net/yiyihuazi/article/details/105451821
参考:https://blog.csdn.net/hanxiaomo_/article/details/122188291 我的界面没有dialog嵌套dialog,只是在组件中打开dialog,不知道为什么会打开这个弹框之后就有一层遮罩,加了append-to-body之后就好了
如果我将外容器的层级调高就会出现div也在遮罩层上面显示的情况发生. 代码类似于下 <div style="position:'fixed'"> <el-buttontype="text"@click="dialogVisible = true">点击打开 Dialog</el-button> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"> ...
①:使用element-ui自带的属性 modal-append-to-body设置为false即可 ②:给el-dialog的父元素添加z-index属性,要比遮罩层的大
el-dialog是Element UI框架中用于创建对话框的组件。当el-dialog被打开时,默认会显示一个遮罩层(mask),用于阻止用户与页面其他部分的交互,同时突出显示对话框内容。这是el-dialog组件的默认行为。 2. el-dialog的遮罩层是否由组件默认行为产生 是的,el-dialog的遮罩层是由组件的默认行为产生的。当你使用el-dialog...
解决办法如下: 文档解决方法.png 给对话框添加append-to-body属性,参考以下代码: <el-dialog:visible.sync="dialogVisible"append-to-bodyclass="noBorder"><img width="100%":src="dialogImageUrl"alt=""></el-dialog> 修改后的示意图如下: 无遮罩层.png...
简介: element-ui框架的el-dialog弹出框被遮罩层遮挡问题 如图: 可以发现el-dialog 组件显示的时候被遮罩层挡住了 解决方案: 给el-dialog组件代码加上: :modal-append-to-body="false" 即可正常显示:关键词: UI框架 UI遮挡 UI el-dialog UI框架el-dialog UI框架el-dialog遮罩层 ...
如下图所示,文案列表的dialog弹窗被遮罩层覆盖,但是遮罩层的z-index层级明显是比弹窗低的 解决办法 在el-dialog标签里添加:modal-append-to-body='false' <el-dialogtitle="文案列表":visible.sync="isShowLabelBoundArticlesList":modal-append-to-body='false'><div>弹窗内容</div></el-dialog>...
原因: Dialog 的外层布局的 position 值为 fixed, absolute, relative 三者之一时,就会出现被蒙板遮住的情况。 解决: // 在 el-dialog 标签里添加 :append-to-body="true" <!-- 编辑弹出框 --> <el-dialog title="添加用户" :visible.sync="editVisible" width="30%" :append-to-body="true"> ...
在一个el-dialog中点击再出现一个el-dialog时会出现一个遮罩层的问题 在这里插入图片描述 解决方法:添加:append-to-body="true"属性; element ui 的官网 正常情况下,我们不建议使用嵌套的 Dialog,如果需要在页面上同时显示多个 Dialog,可以将它们平级放置。对于确实需要嵌套Dialog 的场景,我们提供了append-to-body...