去除 element-ui 中 Dialog 对话框遮罩层的方法

在使用element-ui的Dialog时，默认会有遮罩层，想要去除遮罩层，官方文档给出了 modal 属性；

modal 是一个布尔值，表示是否需要遮罩层；

然而，将 modal 赋值为 false 时并不生效；

这里官方文档也给出了提示：

当 modal 的值为 false 时，请一定要确保 append-to-body 属性为 true，由于 Dialog 使用 position: relative 定位，当外层的遮罩层被移除时，Dialog 则会根据当前 DOM 上的祖先节点来定位，因此可能造成定位问题。

由于定位问题，我们还需将 append-to-body属性置为 true；

本以为事情就这样结束了，然而，事情并不那么简单，此时遮罩层依然存在；

重点来了，我们还需要使用 v-bind 指令来绑定 modal 属性，才能将遮罩层去除；

 <el-dialog :modal="false" append-to-body="true"></el-dialog>

至此，我们就成功的去除了 Dialog 对话框的遮罩层；

<el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</el-button
>
<el-dialog title="dialog去掉遮罩层" v-model="centerDialogVisible" width="30%" center  :modal="false" append-to-body="true"><span>注意：modal需要用v-bind指令绑定</span><template #footer><span class="dialog-footer"><el-button type="primary" @click="centerDialogVisible = false">确定</el-button></span></template>
</el-dialog>

如果小伙伴们有更好的解决方法，欢迎在评论区留言~~~

去除 element-ui 中 Dialog 对话框遮罩层的方法相关推荐

Vue + Bootstrap|Element UI——模态框被遮罩层遮盖问题解决方案
问题描述问题分析 1)若dialog弹出框,它的遮罩层就会被插入到body标签下(即与组件所在的最外层div同一层级) Element UI中设置了modal-append-to-body='tru ...
Element ui Dialog 对话框遮罩层挡住对话框问题
1.当遮罩层挡住对话框需要点击很多下才能使对话框高亮这里不可能让客户点击这么多下的,肯定是代码出现了问题,原来的代码: el-dialog 哪怕添加append-to-body=true 也是会出现 ...
element UI中的select选择器的change方法需要传递多个值
如上图是element UI的一个基本的select选择器根据element UI的官网事件调用,有一下几种: 如果直接调用上述事件,不传任何参数,则可以获取到当前选中的值(因为默认会将event参 ...
element ui中dialog相关问题
一,今天需要在dialog里面引入另一个页面,就是打开dialog显示该页面(把页面放到dialog中),引入的语句如下: <iframe src="view?path=rkdj_b& ...
Web前端笔记-修改element ui中表格样式（透明、去横纵线等含修改思路）
官方效果是这样的: 此处改成了这样的效果: 此处是可以进行滑动的,就是去除了滑动条,仍能滑动的效果. 下面说下修改样式,找到使用el-table的vue组建: 在style中贴上: <style ...
关于Element UI中页面样式小问题
一,修改组件dialog窗口的大小二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...
网页制作 HTML实现遮罩层的方法 HTML中如何使用遮罩层
网页制作 HTML实现遮罩层的方法 HTML中如何使用遮罩层 Web页面中使用遮罩层,可防止重复操作,提示loading:也可以模拟弹出模态窗口. 实现思路:一个DIV作为遮罩层,一个DIV显示loa ...
Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...
element-UI 弹出组件dialog的遮罩层在弹出层的上面 - 解决篇
element-UI 弹出组件的遮罩层在弹出层dialog模态框的上面? bug演示: 代码逻辑调整之后,页面就正常了(代码和效果图 · 见下文): 解决办法: 将dialog组件剪贴到最父级div元 ...

去除 element-ui 中 Dialog 对话框遮罩层的方法

去除 element-ui 中 Dialog 对话框遮罩层的方法相关推荐

最新文章

热门文章