使用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 相关文章推荐
用javascript作一个通用向导说明
Aug 30 Javascript
js菜单点击显示或隐藏效果的简单实例
Jan 13 Javascript
jQuery实现为图片添加镜头放大效果的方法
Jun 25 Javascript
jQuery遮罩层实例讲解
May 11 jQuery
JS常用正则表达式总结【经典】
May 12 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
Jun 07 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
Aug 16 Javascript
js实现每日签到功能
Nov 29 Javascript
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
如何用Node.js编写内存效率高的应用程序
Apr 30 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
Symfony2开发之控制器用法实例分析
2016/02/05 PHP
PHP信号量基本用法实例详解
2016/02/12 PHP
PHP文件上传类实例详解
2016/04/08 PHP
PHP链表操作简单示例
2016/10/15 PHP
Yii1.1中通过Sql查询进行的分页操作方法
2017/03/16 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
JS关键字球状旋转效果的实例代码
2013/11/29 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
使用JQuery库提供的扩展功能实现自定义方法
2014/09/09 Javascript
JavaScript的事件代理和委托实例分析
2015/03/25 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
详解nodejs中的process进程
2017/03/19 NodeJs
vue二级路由设置方法
2018/02/09 Javascript
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
layui使用label标签的方法
2019/09/14 Javascript
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
JavaScript定时器使用方法详解
2020/03/26 Javascript
python采用requests库模拟登录和抓取数据的简单示例
2014/07/05 Python
python sklearn库实现简单逻辑回归的实例代码
2019/07/01 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
中国宠物用品商城:E宠商城
2016/08/27 全球购物
理工科学生的自我评价
2013/12/15 职场文书
交通安全演讲稿
2014/01/07 职场文书
设备动力科岗位职责范本
2014/02/23 职场文书
会计系毕业求职信
2014/08/07 职场文书
颐和园的导游词
2015/01/30 职场文书
慰问信格式
2015/02/14 职场文书
2015年小学生自我评价范文
2015/03/03 职场文书
离婚案件上诉状
2015/05/23 职场文书
sql server删除前1000行数据的方法实例
2021/08/30 SQL Server
使用Python获取字典键对应值的方法
2022/04/26 Python
Spring Boot 的创建和运行示例代码详解
2022/07/23 Java/Android