使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子


Posted in Javascript onSeptember 25, 2019

页面A中弹出页面B,在页面B中弹出页面C,在layer做嵌套ifframe弹出时会遇到C页面被嵌套在B页面中,如果C尺寸大于B,则C将不能显示完整。这个时候可以考虑B,C页面均由A页面弹出从而避免嵌套带来的问题。废话少说,直接上代码。

1.A弹出B:

在A.html中插入一下代码

layer.open({
         title:'新增账号',
         type: 2,
         area: ['700px', '350px'],
         fixed: false, //不固定
         maxmin: false,
         content:['B.html?'+param,'no']
        });

2.B弹出C:

在B.html中插入以下代码

parent.layer.open({
    type: 2,
    skin: 'layui-layer-molv',
    title: "组织机构选择",
    area: ['460px', '600px'],
    shadeClose: false,
    content: ['C.html','no'],
    btn: ['确定','关闭'],
    btn1: function (index) {
      var subIframe=parent.$("iframe");
      if(subIframe!=null&&subIframe.length==2){
        var orgs= subIframe[1].contentWindow.getCMethod();
        if(orgs&&orgs.length>0){
          $("input[name='defaultOrgId']").val(orgs[0].orgId);
          $("input[name='orgName']").val(orgs[0].orgName);
        }
      }
      parent.layer.close(index);//关闭弹出层C.html
    }
  });

3.关闭iframe弹出层js代码

(1)关闭特定iframe

//当在iframe页面关闭自身时,在iframe页执行以下js脚本
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭

(2)关闭所有弹出层

layer.closeAll(); //疯狂模式,关闭所有层
layer.closeAll('dialog'); //关闭信息框
layer.closeAll('page'); //关闭所有页面层
layer.closeAll('iframe'); //关闭所有的iframe层
layer.closeAll('loading'); //关闭加载层
layer.closeAll('tips'); //关闭所有的tips层

4.刷新另一个弹出层

(1)刷新已知index的iframe弹层

layer.iframeSrc(index, 'http://sentsin.com') //官方示例,其中参数index为iframe索引,第二个参数为iframe的URL

(2)刷新未知index的iframe弹层

parent.$("iframe").each(function () {
                $(this).attr('src', $(this).attr('src'));//需要引用jquery
})

以上这篇使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - Menu菜单
Oct 03 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
Dec 28 Javascript
jQuery当鼠标悬停时放大图片的效果实例
Jul 03 Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 Javascript
javascript中的五种基本数据类型
Aug 26 Javascript
html判断当前页面是否在iframe中的实例
Nov 30 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
Jan 03 Javascript
详解vue与后端数据交互(ajax):vue-resource
Mar 16 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
May 11 Javascript
node实现socket链接与GPRS进行通信的方法
May 20 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 Javascript
node.js通过url读取文件
Oct 16 Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 #Javascript
layui实现图片虚拟路径上传,预览和删除的例子
Sep 25 #Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
Sep 25 #Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
Sep 25 #Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
Sep 25 #Javascript
vue+axios实现post文件下载
Sep 25 #Javascript
vue + axios get下载文件功能
Sep 25 #Javascript
You might like
一个目录遍历函数
2006/10/09 PHP
php Smarty date_format [格式化时间日期]
2010/03/15 PHP
PHP flush()与ob_flush()的区别详解
2013/06/03 PHP
PHPstorm激活码2020年5月13日亲测有效
2020/09/17 PHP
javascript import css实例代码
2008/07/18 Javascript
javascript向后台传送相同属性的参数即数组参数
2014/02/17 Javascript
js创建一个input数组并绑定click事件的方法
2014/06/12 Javascript
js 求时间差的实现代码
2016/04/26 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
vue.js表格分页示例
2016/10/18 Javascript
纯js实现悬浮按钮组件
2016/12/17 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
[00:15]TI9地铁玩家打卡
2019/08/11 DOTA
Python构造函数及解构函数介绍
2015/02/26 Python
python下载文件时显示下载进度的方法
2015/04/02 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
Python对切片命名的实现方法
2018/10/16 Python
python自定义线程池控制线程数量的示例
2019/02/22 Python
使用 Python 玩转 GitHub 的贡献板(推荐)
2019/04/04 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
哪些是python中web开发框架
2020/06/17 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
python 实现图片裁剪小工具
2021/02/02 Python
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
四风查摆问题及整改措施
2014/10/10 职场文书
商场营业员岗位职责
2015/04/14 职场文书
七一活动主持词
2015/06/29 职场文书
导游词之桂林
2019/08/20 职场文书
二年级作文之动物作文
2019/11/13 职场文书
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript
JS中如何优雅的使用async await详解
2021/10/05 Javascript