使用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 相关文章推荐
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
Sep 02 Javascript
js的touch事件的实际引用
Oct 13 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
Jun 22 Javascript
Vue $emit $refs子父组件间方法的调用实例
Sep 12 Javascript
React 实现拖拽功能的示例代码
Jan 06 Javascript
JS使用数组实现的队列功能示例
Mar 04 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
Jun 06 Javascript
vue柱状进度条图像的完美实现方案
Aug 26 Javascript
tweenjs缓动算法的使用实例分析
Aug 26 Javascript
原生js实现日历效果
Mar 02 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
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
mysql4.1以上版本连接时出现Client does not support authentication protocol问题解决办法
2007/03/15 PHP
php中explode的负数limit用法分析
2015/02/27 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
dwr spring的集成实现代码
2009/03/22 Javascript
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
解决jquery无法找到其他父级子集问题的方法
2016/05/10 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
2017/03/10 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
2017/10/19 Javascript
vue的keep-alive用法技巧
2019/08/15 Javascript
全面解析js中的原型,原型对象,原型链
2021/01/25 Javascript
[02:32]DOTA2亚洲邀请赛 C9战队出场宣传片
2015/02/07 DOTA
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
Python函数返回值实例分析
2015/06/08 Python
Python实现简单求解给定整数的质因数算法示例
2018/03/25 Python
利用pandas将numpy数组导出生成excel的实例
2018/06/14 Python
pytorch获取vgg16-feature层输出的例子
2019/08/20 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
python开发前景如何
2020/06/11 Python
python re模块常见用法例举
2021/03/01 Python
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
2014/04/16 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
南京软件公司的.net程序员笔试题
2014/08/31 面试题
军训自我鉴定
2013/12/14 职场文书
老同学聚会感言
2014/02/23 职场文书
食品仓管员岗位职责
2015/04/01 职场文书
雨中的树观后感
2015/06/03 职场文书
团队拓展训练心得体会
2016/01/12 职场文书
2019财务毕业实习报告
2019/06/27 职场文书
浅谈Python数学建模之固定费用问题
2021/06/23 Python