使用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 相关文章推荐
Prototype使用指南之hash.js
Jan 10 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
jQuery中on()方法用法实例详解
Feb 06 Javascript
ionic 3.0+ 项目搭建运行环境的教程
Aug 09 Javascript
详解微信小程序审核不通过的解决方法
Jan 17 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
Apr 26 Javascript
vue实现自定义多选与单选的答题功能
Jul 05 Javascript
vue中使用gojs/jointjs的示例代码
Aug 24 Javascript
JavaScript如何实现元素全排列实例代码
May 14 Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 Javascript
一百多行代码实现react拖拽hooks
Mar 23 Javascript
一文彻底理解js原生语法prototype,__proto__和constructor
Oct 24 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
图书管理程序(三)
2006/10/09 PHP
PHP 提取图片img标记中的任意属性的简单实例
2013/12/10 PHP
PHP中isset()和unset()函数的用法小结
2014/03/11 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
js CSS操作方法集合
2008/10/31 Javascript
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
2011/10/06 Javascript
Js操作树节点自动折叠展开的几种方法
2014/05/05 Javascript
JavaScript组件开发完整示例
2015/12/15 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
2017/03/04 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
2017/11/30 Javascript
深入浅出webpack之externals的使用
2017/12/04 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
vue v-model动态生成详解
2018/06/30 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
javascript实现手动点赞效果
2019/04/09 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
JavaScript设计模型Iterator实例解析
2020/01/22 Javascript
Python中给List添加元素的4种方法分享
2014/11/28 Python
简述Python中的面向对象编程的概念
2015/04/27 Python
Python实战之制作天气查询软件
2019/05/14 Python
python进行二次方程式计算的实例讲解
2020/12/06 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
详解HTML5 录音的踩坑之旅
2017/12/26 HTML / CSS
AmazeUI 点击元素显示全屏的实现
2020/08/25 HTML / CSS
ghd官网:英国ghd直发器品牌
2018/05/04 全球购物
艺术专业大学生自我评价
2013/09/22 职场文书
会计系毕业个人自荐信格式
2013/09/23 职场文书
公积金转移接收函
2014/01/11 职场文书
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js
分布式锁为什么要选择Zookeeper而不是Redis?看完这篇你就明白了
2021/05/21 Redis
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js