使用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 相关文章推荐
Firefox outerHTML实现代码
Jun 04 Javascript
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
Jan 05 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 Javascript
javascript中2个感叹号的用法实例详解
Sep 04 Javascript
《JavaScript函数式编程》读后感
Aug 07 Javascript
js剪切板应用clipboardData实例解析
May 29 Javascript
JavaScript对象数组排序实例方法浅析
Jun 15 Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
JavaScript对象的特性与实践应用深入详解
Dec 30 Javascript
深入浅析Vue 中 ref 的使用
Apr 29 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
Oct 21 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
Jul 19 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读取大文件示例分享(文件操作类)
2014/04/13 PHP
PHP调用存储过程返回值不一致问题的解决方法分析
2016/04/26 PHP
javascript 播放器 控制
2007/01/22 Javascript
jQuery autocomplete插件修改
2009/04/17 Javascript
点击弹出层效果&弹出窗口后网页背景变暗效果的实现代码
2014/02/10 Javascript
angularjs中的单元测试实例
2014/12/06 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
详解Angular 4.x 动态创建组件
2017/04/25 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
JS实现简易留言板特效
2019/12/23 Javascript
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
[02:44]DOTA2英雄基础教程 克林克兹
2014/01/15 DOTA
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
python3下实现搜狗AI API的代码示例
2018/04/10 Python
Django项目开发中cookies和session的常用操作分析
2018/07/03 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
windows、linux下打包Python3程序详细方法
2020/03/17 Python
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
2015/08/31 HTML / CSS
Superdry瑞典官网:英国日本街头风品牌
2017/05/17 全球购物
经典优秀毕业生求职信范文分享
2013/12/18 职场文书
关于运动会广播稿50字
2014/10/18 职场文书
2015年预防青少年违法犯罪工作总结
2015/05/22 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL
MySQL 中如何归档数据的实现方法
2022/03/16 SQL Server