脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → element-ui Dialog遮罩层去除

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

 更新时间：2022年12月20日 11:29:15   作者：爱划水de鲸鱼哥  
这篇文章主要为大家介绍了去除element-ui中Dialog对话框遮罩层方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

前言

本文主要介绍了如何去除 element-ui 中 Dialog 对话框遮罩层的方法，并给出了示例代码以及页面效果作为参考。

modal 属性

在使用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对话框遮罩层方法详解的详细内容，更多关于element-ui Dialog遮罩层去除的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • javascript 中iframe高度自适应（同域）实例详解

    javascript 中iframe高度自适应（同域）实例详解

    这篇文章主要介绍了javascript 中iframe高度自适应（同域）实现代码的相关资料,需要的朋友可以参考下
    2017-05-05
  • 详解微信小程序轨迹回放实现及遇到的坑

    详解微信小程序轨迹回放实现及遇到的坑

    这篇文章主要介绍了详解微信小程序轨迹回放实现及遇到的坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02
  • 使用uni-app开发微信小程序的实现

    使用uni-app开发微信小程序的实现

    这篇文章主要介绍了使用uni-app开发微信小程序的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • 如何解决js函数防抖、节流出现的问题

    如何解决js函数防抖、节流出现的问题

    这篇文章主要介绍了如何解决js函数防抖、节流出现的问题。SyntheticEvent对象是通过合并得到的。 这意味着在事件回调被调用后，SyntheticEvent 对象将被重用并且所有属性都将被取消。 因此，您无法以异步方式访问该事件。,需要的朋友可以参考下
    2019-06-06
  • 浅谈JavaScript中的“!!”作用

    浅谈JavaScript中的“!!”作用

    这篇文章主要介绍了浅谈JavaScript中的“!!”作用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • javascript强大的日期函数代码分享

    javascript强大的日期函数代码分享

    这篇文章介绍了javascript强大的日期函数代码，有需要的朋友可以参考一下
    2013-09-09
  • JavaScript JSON数据处理全集(小结)

    JavaScript JSON数据处理全集(小结)

    这篇文章主要介绍了JavaScript JSON数据处理全集，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • uploadify在Firefox下丢失session问题的解决方法

    uploadify在Firefox下丢失session问题的解决方法

    在用uploadify上传插件时遇到了一个问题，在读session时认为没有权限而被拦截了，后来在后台打印登录时产生session的id和上传时读取session的id，解决方法如下，感兴趣的朋友可以了解下
    2013-08-08
  • 尝试动手制作javascript放大镜效果

    尝试动手制作javascript放大镜效果

    这篇文章主要介绍了javascript放大镜效果，照着别人的例子，自己试着做了个放大镜效果，感兴趣的小伙伴们可以参考一下
    2015-12-12
  • 现代 javscript 编程 资料

    现代 javscript 编程 资料

    现代 javscript 编程 资料...
    2007-04-04

最新评论