使用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 相关文章推荐
一步一步制作jquery插件Tabs实现过程
Jul 06 Javascript
如何使用Javascript正则表达式来格式化XML内容
Jul 04 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
Dec 06 Javascript
js给页面加style无效果的解决方法
Jan 20 Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 Javascript
使用Curl命令查看请求响应时间方法
Nov 04 Javascript
ES6通过babel转码使用webpack使用import关键字
Dec 13 Javascript
JavaScript中for循环的几种写法与效率总结
Feb 03 Javascript
vue-cli扩展多模块打包的示例代码
Apr 09 Javascript
vue实现动态列表点击各行换色的方法
Sep 13 Javascript
解决angularjs service中依赖注入$scope报错的问题
Oct 02 Javascript
详解webpack打包第三方类库的正确姿势
Oct 20 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
浅谈PDO的rowCount函数
2015/06/18 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
javascript 避免闭包引发的问题
2009/03/17 Javascript
JavaScript中清空数组的三种方法分享
2011/04/07 Javascript
使用Jquery打造最佳用户体验的登录页面的实现代码
2011/07/08 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
JavaScript地图拖动功能SpryMap的简单实现
2013/07/17 Javascript
node.js使用require()函数加载模块
2014/11/26 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
javascript正则表达式使用replace()替换手机号的方法
2015/01/19 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
关于vue中的ajax请求和axios包问题
2018/04/19 Javascript
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
python实现识别相似图片小结
2016/02/22 Python
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
python logging模块的使用总结
2019/07/09 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
python 实现list或string按指定分段
2019/12/25 Python
python小项目之五子棋游戏
2019/12/26 Python
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2020/11/22 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
纯CSS3实现扇形动画菜单(简化版)实例源码
2017/01/17 HTML / CSS
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
孤独星球出版物:Lonely Planet Publications
2018/03/17 全球购物
C语言变量的命名规则都有哪些
2013/12/27 面试题
局域网定义和特性
2016/01/23 面试题
生产部岗位职责范文
2014/02/07 职场文书
原生JS中应该禁止出现的写法
2021/05/05 Javascript
Mysql将字符串按照指定字符分割的正确方法
2022/05/30 MySQL