使用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 原型和继承(Prototypes and Inheritance)
Apr 01 Javascript
JQuery 图片的展开和伸缩实例讲解
Apr 18 Javascript
js实现有时间限制消失的图片方法
Feb 27 Javascript
JQuery插件jcarousellite的参数中文说明
May 11 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
Sep 22 Javascript
20分钟打造属于你的Bootstrap站点
Jul 27 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
js学使用setTimeout实现轮循动画
Jul 17 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 Javascript
vue循环中点击选中再点击取消(单选)的实现
Sep 10 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
Oct 30 Javascript
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
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
如何在WIN2K下安装PHP4.04
2006/10/09 PHP
PHP 创建文件(文件夹)以及目录操作代码
2010/03/04 PHP
php中定时计划任务的实现原理
2013/01/08 PHP
分享常见的几种页面静态化的方法
2015/01/08 PHP
php中文繁体和简体相互转换的方法
2015/03/21 PHP
ThinkPHP、ZF2、Yaf、Laravel框架路由大比拼
2015/03/25 PHP
CakePHP框架Session设置方法分析
2017/02/23 PHP
php+mysql+jquery实现简易的检索自动补全提示功能
2017/04/15 PHP
web性能优化之javascript性能调优
2012/12/28 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
2013/01/23 Javascript
封装了一个支持匿名函数的Javascript事件监听器
2014/06/05 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
微信小程序开发之toast提示插件使用示例
2017/06/08 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
vue.js评论发布信息可插入QQ表情功能
2017/08/08 Javascript
vue+node+webpack环境搭建教程
2017/11/05 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
Vue-CLI项目中路由传参的方式详解
2019/09/01 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
python装饰器深入学习
2018/04/06 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
python中metaclass原理与用法详解
2019/06/25 Python
python Dijkstra算法实现最短路径问题的方法
2019/09/19 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
Python如何读写CSV文件
2020/08/13 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
static全局变量与普通的全局变量有什么区别?static局部变量和普通局部变量有什么区别?static函数与普通函数有什么区别?
2015/02/22 面试题
羽毛球社团活动总结
2014/06/27 职场文书
nginx结合openssl实现https的方法
2021/07/25 Servers
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技