使用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 相关文章推荐
基于datagrid框架的查询
Apr 08 Javascript
js实现点击每个li节点,都弹出其文本值及修改
Dec 15 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
JavaScript实现鼠标滚轮控制页面图片切换功能示例
Oct 14 Javascript
Angular4的输入属性与输出属性实例详解
Nov 29 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
Aug 12 Javascript
vue实现多个元素或多个组件之间动画效果
Sep 25 Javascript
angular6 填坑之sdk的方法
Dec 27 Javascript
解决vue单页面修改样式无法覆盖问题
Aug 05 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 Javascript
微信小程序实现弹框效果
May 26 Javascript
vue如何使用rem适配
Feb 06 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
dedecms防止FCK乱格式化你的代码的修改方法
2007/03/17 PHP
php检测图片木马多进制编程实践
2013/04/11 PHP
javascript编程起步(第六课)
2007/02/27 Javascript
jquery select(列表)的操作(取值/赋值)
2009/08/06 Javascript
Javascript Object.extend
2010/05/18 Javascript
jquery对ajax的支持介绍
2013/12/10 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
jQuery Validate 数组 全部验证问题
2017/01/12 Javascript
使用Vue自定义数字键盘组件(体验度极好)
2017/12/19 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
2018/05/17 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
10分钟学会js处理json的常用方法
2020/12/06 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
2021/01/03 Vue.js
[14:36]2014 DOTA2国际邀请赛中国区预选赛5.21 Orenda VS NE
2014/05/22 DOTA
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
python批量导出导入MySQL用户的方法
2013/11/15 Python
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
python reduce 函数使用详解
2017/12/05 Python
Python利用Django如何写restful api接口详解
2018/06/08 Python
python 随机打乱 图片和对应的标签方法
2018/12/14 Python
pytorch获取vgg16-feature层输出的例子
2019/08/20 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
python读取ini配置文件过程示范
2019/12/23 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
详解python 内存优化
2020/08/17 Python
Django缓存Cache使用详解
2020/11/30 Python
css3实现信纸/同学录效果的示例代码
2018/12/11 HTML / CSS
东芝官网商城:还原日式美学,打造美好生活
2018/12/27 全球购物
给分销商的致歉信
2014/01/14 职场文书
出纳担保书范文
2014/04/02 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
医院保洁员岗位职责
2015/02/13 职场文书
小组口号霸气押韵
2015/12/24 职场文书