编程 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遮罩层效果兼容ie firefox jQuery遮罩层

Jul 26 Javascript

javascript高级学习笔记整理

Aug 14 Javascript

js/jQuery简单实现选项卡功能

Jan 02 Javascript

js简单倒计时实现代码

Apr 30 Javascript

jQuery电话号码验证实例

Jan 05 Javascript

js实现拖拽功能

Mar 01 Javascript

Node.js常用工具之util模块

Mar 09 Javascript

详解Javascript获取缓存和清除缓存API

May 25 Javascript

详解Angular4 路由设置相关

Aug 26 Javascript

原生JS控制多个滚动条同步跟随滚动效果

Dec 22 Javascript

vue使用video插件vue-video-player详解

Oct 23 Javascript

微信小程序实现录音Record功能

May 09 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阻止页面后退的方法分享

2014/02/17 PHP

php准确计算复活节日期的方法

2015/04/18 PHP

PHP 使用 Imagick 裁切/生成缩略图/添加水印自动检测和处理 GIF

2016/02/19 PHP

PHP中ID设置自增后不连续的原因分析及解决办法

2016/08/21 PHP

用jQuery技术实现Tab页界面之二

2009/09/21 Javascript

网易JS面试题与Javascript词法作用域说明

2010/11/09 Javascript

JQuery 操作/获取table具体代码

2013/06/13 Javascript

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

2013/09/04 Javascript

JS按回车键实现登录的方法

2014/08/25 Javascript

基于js与flash实现的网站flv视频播放插件代码

2014/10/14 Javascript

node.js中的querystring.parse方法使用说明

2014/12/10 Javascript

javascript 判断整数方法分享

2014/12/16 Javascript

jquery实现全选功能效果的实现代码

2016/05/05 Javascript

详解JavaScript的闭包、IIFE、apply、函数与对象

2016/12/21 Javascript

微信小程序本地存储及登录页面处理实例详解

2017/01/11 Javascript

微信小程序登录的简单实现

2017/04/19 Javascript

小程序ios音频播放没声音问题的解决

2018/07/11 Javascript

解决echarts echarts数据动态更新和dataZoom被重置问题

2020/07/20 Javascript

js实现详情页放大镜效果

2020/10/28 Javascript

[01:08]DOTA2次级职业联赛 - Wings 战队宣传片

2014/12/01 DOTA

[00:34]TI7不朽珍藏III——地穴编织者不朽展示

2017/07/15 DOTA

最基础的Python的socket编程入门教程

2015/04/23 Python

在Linux系统上安装Python的Scrapy框架的教程

2015/06/11 Python

Python中的条件判断语句与循环语句用法小结

2016/03/21 Python

Python Pandas找到缺失值的位置方法

2018/04/12 Python

python zip,lambda,map函数代码实例

2020/04/04 Python

Keras 加载已经训练好的模型进行预测操作

2020/06/17 Python

python文件操作seek()偏移量,读取指正到指定位置操作

2020/07/05 Python

Python监听剪切板实现方法代码实例

2020/11/11 Python

IE滤镜与CSS3效果(详细整理分享)

2013/01/25 HTML / CSS

Web前端页面跳转并取到值

2017/04/24 HTML / CSS

盛大二次面试题

2016/11/18 面试题

2014信息公开实施方案

2014/02/22 职场文书

基石观后感

2015/06/12 职场文书

JavaScript实现酷炫的鼠标拖尾特效

2022/02/18 Javascript

详细介绍python操作RabbitMq

2022/04/12 Python