使用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 相关文章推荐
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
Mar 05 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
Mar 04 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 Javascript
js实现显示手机号码效果
Mar 09 Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 Javascript
关于Vue.nextTick()的正确使用方法浅析
Aug 25 Javascript
JS获取字符对应的ASCII码实例
Sep 10 Javascript
解决vue的 v-for 循环中图片加载路径问题
Sep 03 Javascript
vue全局使用axios的方法实例详解
Nov 22 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
javascript canvas API内容整理
Feb 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
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
javascript jQuery插件练习
2008/12/24 Javascript
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
2013/12/27 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
2017/09/28 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
2018/03/13 Javascript
微信小程序时间标签和时间范围的联动效果
2019/02/15 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
Openlayers实现扩散的动态点(水纹效果)
2020/08/17 Javascript
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
Python写的Discuz7.2版faq.php注入漏洞工具
2014/08/06 Python
Python实现从URL地址提取文件名的方法
2015/05/15 Python
深入理解python中函数传递参数是值传递还是引用传递
2017/11/07 Python
如何基于Python + requests实现发送HTTP请求
2020/01/13 Python
代码总结Python2 和 Python3 字符串的区别
2020/01/28 Python
Python2和Python3中@abstractmethod使用方法
2020/02/04 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
Python 存取npy格式数据实例
2020/07/01 Python
Java面试题汇总
2015/12/06 面试题
结婚典礼证婚词
2014/01/11 职场文书
班级入场式解说词
2014/02/01 职场文书
日本语毕业生自荐信
2014/02/01 职场文书
公司门卫岗位职责
2014/03/15 职场文书
525心理活动总结
2014/07/04 职场文书
人力资源管理求职信
2014/08/07 职场文书
文明单位汇报材料
2014/12/24 职场文书
业务员辞职信范文
2015/03/02 职场文书
工作态度恶劣检讨书
2015/05/06 职场文书
风之谷观后感
2015/06/11 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书
导游词之河北白洋淀
2020/01/15 职场文书
PHP解决高并发问题
2021/04/01 PHP