使用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 相关文章推荐
浅说js变量
May 25 Javascript
javascript根据时间生成m位随机数最大13位
Oct 30 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
Dec 31 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
Mar 04 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
JS实现的网页背景闪电闪烁效果代码
Oct 17 Javascript
最基础的vue.js双向绑定操作
Aug 23 Javascript
浅谈Angular2 模块懒加载的方法
Oct 04 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
js实现每日签到功能
Nov 29 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
Mar 13 Javascript
详解Vue前端生产环境发布配置实战篇
May 07 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使用异或实现的加密解密实例
2013/09/04 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
ThinkPHP框架整合微信支付之刷卡模式图文详解
2019/04/10 PHP
解决Laravel 不能创建 migration 的问题
2019/10/09 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
js实现在页面上弹出蒙板技巧简单实用
2013/04/16 Javascript
JavaScript通过select动态更换图片的方法
2015/03/23 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
AngularJS中的Directive自定义一个表格
2016/01/25 Javascript
JavaScript中的Object对象学习教程
2016/05/20 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
在一个页面重复使用一个js函数的方法详解
2016/12/26 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
深入理解vue.js中$watch的oldvalue与newValue
2017/08/07 Javascript
利用angular、react和vue实现相同的面试题组件
2018/02/19 Javascript
vue.js路由mode配置之去掉url上默认的#方法
2019/11/01 Javascript
python通过urllib2爬网页上种子下载示例
2014/02/24 Python
将Python的Django框架与认证系统整合的方法
2015/07/24 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
对Python信号处理模块signal详解
2019/01/09 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
python如何实现DES加密
2020/09/21 Python
Python使用tkinter制作在线翻译软件
2021/02/22 Python
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
实现向右循环移位
2014/07/31 面试题
商务会议邀请函
2014/01/09 职场文书
爱岗敬业演讲稿
2014/05/05 职场文书
保送生自荐信范文
2015/03/26 职场文书
手把手教你制定暑期学习计划,让你度过充实的暑假
2019/08/22 职场文书
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL