使用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验证表单中的单选与多选实例
Aug 18 Javascript
JS的参数传递示例介绍
Feb 08 Javascript
JS实现将人民币金额转换为大写的示例代码
Feb 13 Javascript
layer实现弹窗提交信息
Dec 12 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
Feb 09 Javascript
js实现楼层导航功能
Feb 23 Javascript
windows下vue-cli及webpack搭建安装环境
Apr 25 Javascript
layer实现关闭弹出层刷新父界面功能详解
Nov 15 Javascript
React Native日期时间选择组件的示例代码
Apr 27 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
Sep 23 Javascript
JavaScript this使用方法图解
Feb 04 Javascript
React+EggJs实现断点续传的示例代码
Jul 07 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
php不用正则采集速度探究总结
2008/03/24 PHP
在PHP中养成7个面向对象的好习惯
2010/07/17 PHP
typecho插件编写教程(六):调用接口
2015/05/28 PHP
php快速排序原理与实现方法分析
2016/05/26 PHP
google地图的路线实现代码
2009/08/20 Javascript
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
jquery入门—访问DOM对象方法
2013/01/07 Javascript
js获取系统的根路径实现介绍
2013/09/08 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
2017/09/19 NodeJs
浅谈Vue下使用百度地图的简易方法
2018/03/23 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
2018/04/08 Javascript
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
2018/09/03 Javascript
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
2018/11/14 Javascript
Vue表单控件绑定图文详解
2019/02/11 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
Python入门篇之函数
2014/10/20 Python
深入理解Javascript中的this关键字
2015/03/27 Python
python批量获取html内body内容的实例
2019/01/02 Python
Python3+Pycharm+PyQt5环境搭建步骤图文详解
2019/05/29 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
python开发实例之python使用Websocket库开发简单聊天工具实例详解(python+Websocket+JS)
2020/03/18 Python
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
REN Clean Skincare官网:英国本土有机护肤品牌
2019/02/23 全球购物
shell的种类有哪些
2015/04/15 面试题
工程预算与管理应届生求职信
2013/10/06 职场文书
贷款担保书范文
2014/05/13 职场文书
催款律师函范文
2015/05/27 职场文书
浅析Python中的套接字编程
2021/06/22 Python
python百行代码实现汉服圈图片爬取
2021/11/23 Python
python如何读取和存储dict()与.json格式文件
2022/06/25 Python
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技