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


Posted in Javascript onNovember 19, 2020

要实现的效果如下:

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

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

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内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
TopList标签和JavaScript结合两例
Aug 12 Javascript
JavaScript 布尔操作符解析  && || !
Aug 10 Javascript
js实现感应鼠标图片透明度变化的方法
Feb 20 Javascript
Javascript实现飞动广告效果的方法
May 25 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
Feb 22 Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 Javascript
JavaScript事件发布/订阅模式原理与用法分析
Aug 21 Javascript
从零搭一个自用的前端脚手架的方法步骤
Sep 23 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
Sep 25 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 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 存取 MySQL 数据库的一个例子
2006/10/09 PHP
php 获得汉字拼音首字母的函数
2009/08/01 PHP
php实现快速排序的三种方法分享
2014/03/12 PHP
PHP图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
php 猴子摘桃的算法
2017/06/20 PHP
JavaScript 模拟用户单击事件
2009/12/31 Javascript
海量经典的jQuery插件集合
2010/01/12 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
javascript制作坦克大战全纪录(2)
2014/11/27 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
JavaScript实现可拖拽的拖动层Div实例
2015/08/05 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
详解Bootstrap各式各样的按钮(推荐)
2016/12/13 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
2017/12/23 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
解决vue v-for src 图片路径问题 404
2019/11/12 Javascript
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
swiper实现导航滚动效果
2020/12/13 Javascript
python字符串中匹配数字的正则表达式
2019/07/03 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
Python FtpLib模块应用操作详解
2019/12/12 Python
Python实现i人事自动打卡的示例代码
2020/01/09 Python
开放系统互连参考模型
2016/06/29 面试题
个人找工作自荐信格式
2013/09/21 职场文书
顶岗实习计划书
2014/01/10 职场文书
工程资料员岗位职责
2014/03/10 职场文书
主管竞聘书范文
2014/03/31 职场文书
节约用水演讲稿
2014/05/21 职场文书
广告设计专业毕业生自我鉴定
2014/09/27 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书
Java中CyclicBarrier和CountDownLatch的用法与区别
2021/08/23 Java/Android
请求模块urllib之PYTHON爬虫的基本使用
2022/04/08 Python