使用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 相关文章推荐
2007/12/23更新创意无限,简单实用(javascript log)
Dec 24 Javascript
jquery URL参数判断,确定菜单样式
May 31 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
Jan 06 Javascript
JavaScript中获取样式的原生方法小结
Oct 08 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
Jun 09 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
Nov 10 Javascript
JavaScript实现shuffle数组洗牌操作示例
Jan 03 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
Aug 12 Javascript
Taro小程序自定义顶部导航栏功能的实现
Dec 17 Javascript
一篇文章看懂JavaScript中的回调
Jan 05 Javascript
让JavaScript代码更加精简的方法技巧
Jun 01 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新手上路(六)
2006/10/09 PHP
PHP项目开发中最常用的自定义函数整理
2010/12/02 PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
javascript实现博客园页面右下角返回顶部按钮
2015/02/22 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
2015/11/02 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
JavaScript作用域示例详解
2016/07/07 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
关于foreach循环中遇到的问题小结
2017/05/08 Javascript
backbone简介_动力节点Java学院整理
2017/07/14 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
Python中的作用域规则详解
2015/01/30 Python
状态机的概念和在Python下使用状态机的教程
2015/04/11 Python
CentOS中升级Python版本的方法详解
2017/07/10 Python
Python Requests库基本用法示例
2018/08/20 Python
更改Python的pip install 默认安装依赖路径方法详解
2018/10/27 Python
python的faker库用法
2019/11/28 Python
解决pycharm每次打开项目都需要配置解释器和安装库问题
2020/02/26 Python
python判断两个序列的成员是否一样的实例代码
2020/03/01 Python
keras 多任务多loss实例
2020/06/22 Python
Python 实现二叉查找树的示例代码
2020/12/21 Python
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
澳大利亚当地社区首选的光学商店:1001 Optical
2019/08/24 全球购物
DBA的职责都有哪些
2012/05/16 面试题
保险经纪人求职信
2014/03/11 职场文书
学生会部长竞聘书
2014/03/31 职场文书
小学生综合素质评语
2014/04/23 职场文书
小学生学雷锋演讲稿
2014/04/25 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
利用Matlab绘制各类特殊图形的实例代码
2021/07/16 Python