编程 Javascript

elementUI同一页面展示多个Dialog的实现

Posted in Javascript onNovember 19, 2020

要实现的效果如下：

首先官方文档是这样描述的：

elementUI同一页面展示多个Dialog的实现

但是我写了个小demo发现并不能直接平级放置即可，一样会存在先后顺序不同造成的覆盖以及遮罩层导致不能点击被遮盖的dialog。

原因如下：因为dialog先后顺序不同z-index设置的层级不同，所以必定会覆盖遮挡

elementUI同一页面展示多个Dialog的实现

那么我们要实现一个这样的效果不仅仅平级放置即可，就要用到里面的一个属性：modal

elementUI同一页面展示多个Dialog的实现

下面贴上代码：

elementUI同一页面展示多个Dialog的实现

总的思路就是：dialog先后顺序重叠问题，使用便宜去让它们错开；然后就是遮罩层导致不能点击z-index层级低的弹框，就要用到modal去关闭z-index层级高的遮罩层。（还可以额外使用close-on-click-modal来取消通过点击 modal 关闭 Dialog）

到此这篇关于elementUI同一页面展示多个Dialog的实现的文章就介绍到这了,更多相关elementUI多Dialog内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

elementUI同一页面展示多个Dialog的实现

- Author -

rirmk

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery UI-Draggable 参数集合

Jan 10 Javascript

在多个页面使用同一个HTML片段的代码

Mar 04 Javascript

js检查页面上有无重复id的实现代码

Jul 17 Javascript

使用JavaScript开发IE浏览器本地插件实例

Feb 18 Javascript

jQuery动态背景图片效果实现方法

Jul 03 Javascript

1秒50万字!js实现关键词匹配

Aug 01 Javascript

原生js的RSA和AES加密解密算法

Oct 08 Javascript

vue+ElementUI实现订单页动态添加产品数据效果实例代码

Jul 13 Javascript

JavaScript实现旋转轮播图

Aug 18 Javascript

vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能

Mar 01 Javascript

Vue项目中如何使用Axios封装http请求详解

Oct 23 Javascript

vue keep-alive 动态删除组件缓存的例子

Nov 04 Javascript

微信小程序实现点击导航标签滚动定位到对应位置

Nov 19 #Javascript

深入了解Vue3模板编译原理

Nov 19 #Vue.js

微信小程序实现倒计时功能

Nov 19 #Javascript

微信小程序实现列表左右滑动

Nov 19 #Javascript

详解JavaScript 中的批处理和缓存

Nov 19 #Javascript

Javascript中window.name属性详解

Nov 19 #Javascript

JavaScript实现图片合成下载的示例

Nov 19 #Javascript

You might like

php 中include()与require()的对比

2006/10/09 PHP

PHP禁止页面缓存的代码

2011/10/23 PHP

ThinkPHP3.1新特性之动态设置自动完成和自动验证示例

2014/06/19 PHP

Yii 2.0实现联表查询加搜索分页的方法示例

2017/08/02 PHP

php微信开发之关注事件

2018/06/14 PHP

jQuery实现原理的模拟代码 -6 代码下载

2010/08/16 Javascript

手把手教你自己写一个js表单验证框架的方法

2010/09/14 Javascript

JavaScript初学者应注意的七个细节小结

2012/01/30 Javascript

window.returnValue使用方法示例介绍

2014/07/03 Javascript

js鼠标悬浮出现遮罩层的方法

2015/01/28 Javascript

jQuery实现鼠标经过图片变亮其他变暗效果

2015/05/08 Javascript

基于HTML+CSS+JS实现增加删除修改tab导航特效代码

2016/08/05 Javascript

Bootstrap table的使用方法

2016/11/02 Javascript

vue 巧用过渡效果(小结)

2018/09/22 Javascript

原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作

2019/02/27 jQuery

微信小程序云开发之新手环境配置

2019/05/16 Javascript

Javascript通过控制类名更改样式

2019/05/24 Javascript

VUE前后端学习tab写法实例

2019/08/06 Javascript

微信小程序中的列表切换功能实例代码详解

2020/06/09 Javascript

[46:16]2018DOTA2亚洲邀请赛3月30日小组赛B组 iG VS VP

2018/03/31 DOTA

Python 搭建Web站点之Web服务器与Web框架

2016/11/06 Python

Python管理Windows服务小脚本

2018/03/12 Python

django从请求到响应的过程深入讲解

2018/08/01 Python

Window10下python3.7 安装与卸载教程图解

2019/09/30 Python

Python如何把十进制数转换成ip地址

2020/05/25 Python

python学习将数据写入文件并保存方法

2020/06/07 Python

calendar在python3时间中常用函数举例详解

2020/11/18 Python

IE9下html5初试小刀

2010/09/21 HTML / CSS

.NET里面如何取得当前的屏幕分辨率

2012/12/06 面试题

咖啡店的创业计划书，让你hold不住

2014/01/03 职场文书

新品发布会主持词

2014/04/02 职场文书

继承公证书

2014/04/09 职场文书

安阳殷墟导游词

2015/02/10 职场文书

2015年城管执法工作总结

2015/07/23 职场文书

给校长的建议书范文

2015/09/14 职场文书

《鲁滨逊漂流记》之六读后感（4篇）

2019/09/29 职场文书