编程 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 相关文章推荐

js中查找最近的共有祖先元素的实现代码

Dec 30 Javascript

修改file按钮的默认样式实现代码

Apr 23 Javascript

js判断undefined类型示例代码

Feb 10 Javascript

js实现文本框中焦点在最后位置

Mar 04 Javascript

jquery中EasyUI实现同步树

Mar 01 Javascript

Node.js环境下编写爬虫爬取维基百科内容的实例分享

Jun 12 Javascript

JavaScript中push(),join() 函数实例详解

Sep 06 Javascript

微信小程序详解Page中data数据操作和函数调用

Jan 12 Javascript

微信小程序实现自上而下字幕滚动

Jul 14 Javascript

详解iframe跨域的几种常用方法(小结)

Apr 29 Javascript

JS数据类型STRING使用实例解析

Dec 18 Javascript

JS实现秒杀倒计时特效

Jan 02 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

我常用的几个类

2006/10/09 PHP

PHP脚本的10个技巧(3)

2006/10/09 PHP

一道关于php变量引用的面试题

2010/08/08 PHP

两种php给图片加水印的实现代码

2020/04/18 PHP

wampserver改变默认网站目录的办法

2015/08/05 PHP

jQuery动态添加删除select项(实现代码)

2013/09/03 Javascript

浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用

2014/11/23 Javascript

ECMAScript6中Set/WeakSet详解

2015/06/12 Javascript

js匿名函数作为函数参数详解

2016/06/01 Javascript

js获取浏览器高度窗口高度元素尺寸偏移属性的方法

2016/11/21 Javascript

原生JavaScript实现Tooltip浮动提示框特效

2017/03/07 Javascript

React教程之封装一个Portal可复用组件的方法

2018/01/02 Javascript

使用vue2.0创建的项目的步骤方法

2018/09/25 Javascript

JS随机密码生成算法

2019/09/23 Javascript

sharp.js安装过程中遇到的问题总结

2020/04/02 Javascript

浅谈javascript如何获取文件后缀名

2020/08/07 Javascript

线程和进程的区别及Python代码实例

2015/02/04 Python

Python 实现简单的电话本功能

2015/08/09 Python

Python内置函数delattr的具体用法

2017/11/23 Python

Python基于更相减损术实现求解最大公约数的方法

2018/04/04 Python

用python处理图片之打开\显示\保存图像的方法

2018/05/04 Python

Flask实现跨域请求的处理方法

2018/09/27 Python

用python3教你任意Html主内容提取功能

2018/11/05 Python

Django 数据库同步操作技巧详解

2019/07/19 Python

Python大数据之使用lxml库解析html网页文件示例

2019/11/16 Python

Python正则表达式急速入门(小结)

2019/12/16 Python

使用Python实现将多表分批次从数据库导出到Excel

2020/05/15 Python

html5唤醒APP小记

2019/03/27 HTML / CSS

FC-Moto西班牙：摩托车手最大的购物场所之一

2019/04/11 全球购物

Watchshop德国：欧洲在线手表No.1

2019/06/20 全球购物

房屋改造计划书

2014/01/10 职场文书

学生党员的自我评价范文

2014/03/01 职场文书

2014年技术工作总结范文

2014/11/20 职场文书

2015小学音乐教师个人工作总结

2015/07/21 职场文书

2016教师节感恩话语

2015/12/09 职场文书

MySQL示例讲解数据库约束以及表的设计

2022/06/16 MySQL