使用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 相关文章推荐
js 上传图片预览问题
Dec 06 Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 Javascript
javascript操作excel生成报表全攻略
May 04 Javascript
JQuery实现table行折叠效果以JSON做数据源
May 26 Javascript
jQuery中extend函数详解
Feb 13 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
Javascript中arguments对象的详解与使用方法
Oct 04 Javascript
AngularJS封装指令方法详解
Dec 12 Javascript
vuex的简单使用教程
Feb 02 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
May 10 Javascript
微信小程序一周时间表功能实现
Oct 17 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
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
php上传、管理照片示例
2006/10/09 PHP
php动态生成JavaScript代码
2009/03/09 PHP
php Smarty初体验二 获取配置信息
2011/08/08 PHP
php使用function_exists判断函数可用的方法
2014/11/19 PHP
php中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
PHP中Static(静态)关键字功能与用法实例分析
2019/04/05 PHP
JS 遮照层实现代码
2010/03/31 Javascript
JS的document.all函数使用示例
2013/12/30 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
jQuery 插件开发指南
2014/11/14 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
快速搭建vue2.0+boostrap项目的方法
2018/04/09 Javascript
小程序实现留言板
2018/11/02 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
js实现车辆管理系统
2020/08/26 Javascript
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
Python中使用pypdf2合并、分割、加密pdf文件的代码详解
2019/05/21 Python
python实现批量视频分帧、保存视频帧
2019/05/31 Python
解决python调用自己文件函数/执行函数找不到包问题
2020/06/01 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
美国眼镜网:GlassesUSA
2017/09/07 全球购物
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
C语言基础笔试题
2013/04/27 面试题
2015年小学数学教师工作总结
2015/05/20 职场文书
参加招聘会后的感想
2015/08/10 职场文书
python3 删除所有自定义变量的操作
2021/04/08 Python
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript
Java基础之this关键字的使用
2021/06/30 Java/Android
html5调用摄像头截图功能
2022/01/18 Javascript
浅析JavaScript中的变量提升
2022/06/01 Javascript