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

目录
  • 前言
  • modal 属性
  • 示例代码：

前言

本文主要介绍了如何去除 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遮罩层去除的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 基于element-ui对话框el-dialog初始化的校验问题解决

    不刷新页面重新打开el-dialog时,如果我们绑定了rules或者某个值需要required,它总会自动校验. 查看了多个博文,发现常用的有两种解决方法(下列方法都可以在其他博文查看,不再细写,如有需要请自行查询): 1.给dialog套上v-if : 2.在关闭dialog时,监听关闭回调,清除校验. 我在自己的项目里使用了上述两种方法,都不太好用,自己琢磨出了另一种方法: <el-dialog @open="openDialog()"> </el-dialog&

  • element-ui 对话框dialog使用echarts报错'dom没有获取到'的问题

    给el-dialog添加@open="open()" 在刚进入页面的时候对话框是关闭的,echarts不进行获取dom,当点击对话框出来的时候,有个opened事件,在这个事件里边进行echarts的初始化,执行数据: <el-dialog lock-scroll width="80%" style="height:100%;" @opened="opens"> <div style="displa

  • element-ui dialog弹窗增加全屏功能(推荐)

    目录 一.定义全局变量 dialogFull 用来控制弹窗 二.dialog标签添加全局属性绑定 三.设置title区域的自定义 四.css样式部分: 完成效果图: 一.定义全局变量 dialogFull 用来控制弹窗 dialogFull:false, 二.dialog标签添加全局属性绑定 :fullscreen="dialogFull" 三.设置title区域的自定义 <template slot="title"> <div class=&qu

  • vue+element-ui前端使用print-js实现打印功能(可自定义样式)

    vue+element-ui前端使用print-js实现打印功能(可自定义样式)

    目录 下载依赖 使用print-js 实现打印功能 需要打印的内容 按钮调用打印函数 打印函数 调整打印字体大小 参数 总结 print-js官网链接: https://printjs.crabbly.com/ 下载依赖 npm install print-js --save 在package.json文件中增加print-js依赖. "dependencies": { "axios": "^0.19.2", "babel-polyfi

  • Vue中使用element-ui给按钮绑定一个单击事件实现点击按钮就弹出dialog对话框

    目录 1.需求描述 2.功能实现 1.创建按钮 2.创建对话框 3.对话框与按钮的绑定 3.对话框表单的改造 4.对“状态”Switch开关所提交的类型进行修改 5.完整代码 总结 1.需求描述 想要实现点击一个按钮就弹出一个对话框,在对话框中可输入数据进行提交,在点击取消时对话框关闭 2.功能实现 1.创建按钮 在element中把找到按钮的代码放到div里 <el-row> <el-button type="primary" plain>新增</el-

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

    目录 前言 modal 属性 示例代码: 前言 本文主要介绍了如何去除 element-ui 中 Dialog 对话框遮罩层的方法,并给出了示例代码以及页面效果作为参考. modal 属性 在使用element-ui的Dialog时,默认会有遮罩层,想要去除遮罩层,官方文档给出了 modal 属性: modal 是一个布尔值,表示是否需要遮罩层: 然而,将 modal 赋值为 false 时并不生效: 这里官方文档也给出了提示: 当 modal 的值为 false 时,请一定要确保 append

  • Element UI中v-infinite-scroll无限滚动组件使用详解

    目录 一.v-infinite-scroll无限滚动组件使用详解 二.组件无限加载原因及解决方式 三.总结 总结 一.v-infinite-scroll无限滚动组件使用详解 1.v-infinite-scroll="load" //load无限滚动加载的方法 2.infinite-scroll-disabled //是否禁用无限滚动加载 3.infinite-scroll-delay //节流时延,单位为ms 4.infinite-scroll-distance //触发加载的距离阈值

  • C/C++ Qt 自定义Dialog对话框组件应用案例详解

    C/C++ Qt 自定义Dialog对话框组件应用案例详解

    在上一篇文章 <C/C++ Qt 标准Dialog对话框组件应用> 中我给大家演示了如何使用Qt中内置的标准对话框组件实现基本的数据输入功能. 但有时候我们需要一次性修改多个数据,使用默认的模态对话框似乎不太够用,此时我们需要自己创建一个自定义对话框,这类对话框也是一种窗体,所以可以在其上面放置任何的通用组件,以实现更多复杂的开发需求. 目前自定义对话框与主窗体的通信有两种方式,一种是通过函数实现通信,另一种则是通过信号实现通信,我们以通过函数通信为基础,解释一下如何实现跨窗体通信. 首先需要

  • js基础之DOM中元素对象的属性方法详解

    js基础之DOM中元素对象的属性方法详解

    在 HTML DOM (文档对象模型)中,每个部分都是节点. 节点是DOM结构中最基本的组成单元,每一个HTML标签都是DOM结构的节点. 文档是一个    文档节点 . 所有的HTML元素都是    元素节点 所有 HTML 属性都是    属性节点 文本插入到 HTML 元素是    文本节点 注释是    注释节点. 最基本的节点类型是Node类型,其他所有类型都继承自Node,DOM操作往往是js中开销最大的部分,因而NodeList导致的问题最多.要注意:NodeList是'动态的',

  • SpringMVC中常用注解与使用方法详解

    SpringMVC中常用注解与使用方法详解

    MVC简介 MVC 全名是 Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写, 是一种用于设计创建 Web 应用程序表现层的模式. Model(模型): 通常指的就是我们的数据模型.作用一般情况下用于封装数据. View(视图): 通常指的就是我们的 jsp 或者 html.作用一般就是展示数据的. 通常视图是依据模型数据创建的. Controller(控制器): 是应用程序中处理用户交互的部分.作用一般就是处理程序逻辑的.

  • React TypeScript 应用中便捷使用Redux Toolkit方法详解

    目录 前言 背景 Redux-Toolkit 常规使用 优化方案 优化 useDispatch 和 useSelector 优化修改 redux 状态的步骤 总结 前言 本文介绍的主要内容是 Redux-Toolkit 在 React + TypeScript 大型应用中的实践,主要解决的问题是使用 createSlice 的前提下消费 redux 状态仍旧有点繁琐的问题. 阅读本文需要的前置知识:了解 React .Redux-Toolkit .TypeScript 的使用. 关于 Redux

  • Mybatis中SqlSession接口中selectList方法详解

    目录 1.SqlSession简介 2.selectList方法 3.selectList方法简介 总结 1.SqlSession简介 SqlSession是mybatis持久层框架提供的接口,该接口中包含了大量的CRUD操作方法(既增删改查方法). 2.selectList方法 selectList方法是用于查询的方法,该方法具有多态性,如图所示(打开mybatis的SqlSession接口所得到) 3.selectList方法简介 该方法一共有三种不同的调用方式: List selectLi

  • JavaScript 中有关数组对象的方法(详解)

    JS 处理数组多种方法 js 中的数据类型分为两大类:原始类型和对象类型. 原始类型包括:数值.字符串.布尔值.null.undefined 对象类型包括:对象即是属性的集合,当然这里又两个特殊的对象----函数(js中的一等对象).数组(键值的有序集合). 数组元素的添加 arrayObj.push([item1 [item2 [. . . [itemN ]]]]); 将一个或多个新元素添加到数组结尾,并返回数组新长度 arrayObj.unshift([item1 [item2 [. . .

  • Mongodb中MapReduce实现数据聚合方法详解

    Mongodb中MapReduce实现数据聚合方法详解

    Mongodb是针对大数据量环境下诞生的用于保存大数据量的非关系型数据库,针对大量的数据,如何进行统计操作至关重要,那么如何从Mongodb中统计一些数据呢? 在Mongodb中,给我们提供了三种用于数据聚合的方式: (1)简单的用户聚合函数: (2)使用aggregate进行统计: (3)使用mapReduce进行统计: 今天我们首先来讲讲mapReduce是如何统计,在后续的文章中,将另起文章进行相关说明. MapReduce是啥呢?以我的理解,其实就是对集合中的各个满足条件的文档进行预处理

  • Javascript中的迭代、归并方法详解

    迭代方法 在Javascript中迭代方法个人觉得尤为重要,在很多时候都会有实际上的需求,javascript提供了5个迭代方法来供我们操作,它们分别为: every() 对数组中的每一个项运用给定的函数,如果每项都返回true,那么就会返回true filter() 对数组中的每一个项运用给定的函数,把返回true的项组成一个新数组并返回 forEach() 对数组中的每一项运用给定的函数,但是没有任何的返回值 map() 对数组中的每一个项运用给定的函数并返回每次函数调用的结果组成新的数组

随机推荐