Layer组件多个iframe弹出层打开与关闭及参数传递的方法

一、Layer简介

Layer是一款近年来备受青睐的web弹层组件,基于jquery,易用、实用,兼容包括IE6在内的所有主流浏览器,拥有丰富强大的可自定义的功能。

Layer官网地址:http://layer.layui.com/

二、多个iframe弹出层(非嵌套)

1.打开iframe弹出层js代码

(1)示例一:

layer.open({
type: 2,

title: 'layer mobile页',

shadeClose: true,

shade: 0.8,

area: ['380px', '90%'],

content: 'mobile/' //iframe的url

});

content参数可传入要打开的页面,type参数传2,即可打开iframe类型的弹层

(2)示例二:

layer.open({
 type: 2,
 title: false,
 closeBtn: 0, //不显示关闭按钮
 shade: [0],
 area: ['340px', '215px'],
 offset: 'rb', //右下角弹出
 time: 2000, //2秒后自动关闭
 anim: 2,
 content: ['test/guodu.html', 'no'], //iframe的url,no代表不显示滚动条
 end: function(){ //此处用于演示
 layer.open({
  type: 2,
  title: '很多时候,我们想最大化看,比如像这个页面。',
  shadeClose: true,
  shade: false,
  maxmin: true, //开启最大化最小化按钮
  area: ['893px', '600px'],
  content: '//fly.layui.com/'
 });
 }
});

(3)示例三:在弹出层A中打开新弹出层B,与弹出层A同一DOM层级

可根据项目需求,简单封装弹出层打开方法,如下:

//在弹出层A(子页面1)打开新弹出层B(子页面2),弹出层A、B在同一DOM层级,即父页面内有多个iframe,子页面2不嵌套在子页面1中;<br>//在弹出层A(子页面1)中封装如下方法,在需要触发打开新弹出层B事件中执行如下方法;
function openLayerUrl(url, width, height) {
    parent.layer.open({
    type: 2,
    title: false,
    closeBtn: false,
    shadeClose: false,
    shade: 0.6,
    border: [0],
    area: [width <= 0 ? "auto" : width + 'px', height <= 0 ? "auto" : height + 'px'],
    content: url,
   })
  }

2.关闭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层

3.刷新另一个弹出层

(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
})

如果刷新所有iframe不影响,则可以重置所有iframe。在弹层A关闭后,需要刷新弹层B,在弹层A执行以上脚本后关闭当前弹层A;

4.iframe弹出层参数传递

(1)父页面传参到iframe弹出层

var collectionId = parent.$("#hideCollectionId").val();//可在父页面定义隐藏域,id为hideCollectionId,需要引用jquery

(2)iframe弹出层A传参到iframe弹出层B

比如在弹出层A按钮打开另一个弹出层B,可在layer.open()函数content参数配置中,以URL形式传参即可,(content:'http://www.baidu.com?id='+100)

<a href="javascript:void(0);" rel="external nofollow" class="a1" <br>οnclick="openLayerUrl('@domainTeamUrl/Notice/Update?id='+ @Model.Id,876,575);closeLayer()">修改</a><br>//在ASP.Net MVC Razor视图中使用示例,openLayerUrl()为本篇中介绍的打开Layer弹出层的封装方法,closeLayer()为封装的关闭layer弹出层的方法;

也可以考虑使用success(弹出后回调)、end(销毁后回调)、cancel(关闭回调)等参数配置中做其他工作;  

三、多个iframe弹出层(嵌套)

1.弹出层打开与关闭

如果使用嵌套的iframe也是可以的,如iframe弹出层B(子页面2)嵌套在iframe弹出层A(子页面1)中,iframe弹出层A嵌套在父页面中,

在父页面打开弹出层A,父页面脚本用layer.open();

在弹出层A打开弹出层B,子页面2脚本用layer.open();

在弹出层B中关闭弹出层A和B,弹出层B用脚本parent.parent.closeAll();

2.弹出层传参

jquery取得父页面元素:

parent.parent.$("#hideCollectionId").val();//取得父页面之父页面的非动态生成的元素
$("#hideCollectionId",parent.parent.document).val();//取得父页面之父页面的动态生成的元素

附:jquery父页面与子页面如何互相访问元素与方法

(1)jquery在父窗口中获取iframe中的元素

Jquery代码 父窗口中获取iframe中的非动态生成元素

格式:$("#iframe的ID").contents().find("#iframe中的控件ID").click();//jquery 方法1

实例:$("#ifm").contents().find("#btnOk").click();//jquery 方法1

Jquery代码 父窗口中获取iframe中的动态生成元素

格式:$("#iframe中的控件ID",document.frames("frame的name").document).click();//jquery 方法2

实例:$("#btnOk",document.frames("ifm").document).click();//jquery 方法2

(2) jquery在iframe中获取父窗口的元素

格式:$('#父窗口中的元素ID', parent.document).click();

实例:$('#btnOk', parent.document).click();

四、不显示iframe中的滚动条

有时候不想让iframe弹层出现滚动条,则可以在content参数中传入一个字符串数组

layer.open({
 type: 2,
 content: 'http://sentsin.com' //这里content是一个URL,如果你不想让iframe出现滚动条,你还可以content: ['http://sentsin.com', 'no']
});

更多使用技巧,请移步官网阅读弹层组件开发文档

结语

本篇介绍了Layer弹出层组件在多个弹出层场景使用及传参方法,包括非嵌套弹出层和嵌套弹出层打开与关闭方法。希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 解决layui弹出层layer的area过大被遮挡的问题

    layer弹出窗口在弹出时指定了area,弹出后,如果当前页面(iframe)大小比弹出的窗口小,那么就会出现无法操作弹出窗口的尴尬情况. 如图: 弹出窗口比当前页面大,这时,唯有放大整个页面才能看到完全的弹出窗口,才可以操作. layui 为我们提供了 layer.style(); 方法来重新跳整窗口的大小 , 然后我们只需要写一个函数,得到当前document的宽度和高度, 判断弹出框是否大于document来调整窗口大小 <!DOCTYPE html> <html lang=&qu

  • layer弹出层取消遮罩的方法

    layer 只是作为 layui 的一个弹层模块 layer弹出层取消遮罩 笔者认为 跟 layer弹出层非模态对话框类似 layer.open({ title: '在线调试', content: '可以填写任意的layer代码', shade:0 }); shade - 遮罩 类型:String/Array/Boolean,默认:0.3 即弹层外区域.默认是0.3透明度的黑色背景('#000').如果你想定义别的颜色,可以shade: [0.8, '#393D49']:如果你不想显示遮罩,可以

  • 解决layer弹层遮罩挡住窗体的问题

    使用代码: <div> <div>这里面某个按钮触发弹层<div> <div id='dialog' hidden='hidden'></div> </div> 如果上面的按钮触发了弹层 layer.open 且content是某个DOM元素 content:$('#dialog') 那么这里弹出层,遮罩会遮住到弹窗导致操作不了. 官网给出的说法是 如果弹层的内容content是某个DOM元素的话,要放在body的根节点下.不能放在d

  • layer 关闭指定弹出层的例子

    首先,弹出某个层时需要给层取名(赋值),如: var mylay = layer.open({ type: 2, content: 'layer.html', title: false, area: ['500px', '500px'] }); 需要关闭指定的弹出层时,直接: layer.close(mylay) 如果在弹出层中写js,将弹出层自身关闭,可以先获取到弹出层名字,再将其关闭 var mylay = parent.layer.getFrameIndex(window.name); p

  • 解决layer弹出层自适应页面大小的问题

    前两天在Vue中引入了Vue-layer插件,实现了弹出层效果.不过由于是在22寸屏下开发的,没多想,弹出层的area的长宽就设定的都是800px,效果还很好.结果那给用户看,他们是12寸的笔记本.弹出层直接撑爆了页面,无法关闭... 网上的解决方案大都是以下几种: 1.改成百分比形式.有bug,下面细说. 2.改成em,rem等.同上 3.采用area:auto.可能是因为采用了swiper的原因吧,这样设置会导致弹出层出现"顶天立地"的效果 4.采用iframeAuto.这个没太搞

  • 解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题

    弹出某个层时需要给层取名(赋值) var = ggLayer = layer.open({ type: 1, content: $('.choose-gg').html(), anim: 'up', style: 'position:fixed; bottom:0; left:0; width: 100%; height: auto; padding:10px 0; border:none;' }); layer.closeAll(); 关闭遮罩层 layer.close(ggLayer);关闭

  • layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法

    昨天layer插件弹出层关闭问题弄的我直挠头,短短几行代码,用了我将近2个钟头才解决.我的使用场景是这样.在页面中用layer.open弹出一个层,在层内是微信支付二维码,客户扫码支付.支付成功后关闭此弹出层,并提示项目投递成功,然后再跳转到其他页面.为了监控微信二维码扫码支付是否成功.我利用了每隔三秒,查询下支付订单,查看支付订单的支付状态是否改变.在实际操作中由于使用的是location.href做跳转,然而跳转执行的非常慢,要10几秒才能成功,这不能忍.只能退而求其次,只是提示投递成功,然

  • Layer组件多个iframe弹出层打开与关闭及参数传递的方法

    一.Layer简介 Layer是一款近年来备受青睐的web弹层组件,基于jquery,易用.实用,兼容包括IE6在内的所有主流浏览器,拥有丰富强大的可自定义的功能. Layer官网地址:http://layer.layui.com/ 二.多个iframe弹出层(非嵌套) 1.打开iframe弹出层js代码 (1)示例一: layer.open({ type: 2, title: 'layer mobile页', shadeClose: true, shade: 0.8, area: ['380p

  • 在layui中layer弹出层点击事件无效的解决方法

    1.click只能为页面现有的元素绑定点击事件,如果是动态生成的新的元素,是没有事 件的 2.而(document).on("click","指定的元素",function()); 方法则是将指定的事件绑定在document上,而新产生的元素如果符合指定的元素,那就触发此事件不起作用:(document).on("click","指定的元素",function()); 方法则是将指定的事件绑定在document上,而新产生的元

  • 点击弹出层外区域关闭弹出层jquery特效示例

    点击弹出层外区域关闭弹出层jquery特效,废话不说,上代码,简洁明了: 复制代码 代码如下: <html> <head> <style> .hide{display:none;} .con{width:500px;height:300px;background:#000;} </style> <title>点击弹出层 ,点击弹出层外区域关闭弹出层jquery特效</title> <script type="text/

  • jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)

    本文实例讲述了jquery实现仿新浪微博带动画效果弹出层代码.分享给大家供大家参考.具体如下: 这是一款jquery实现带动画的弹出层,最开始是模拟新浪微博中的弹出层,后来引入了jQuery,又想了想,加入点动画效果不知怎么样,后来就写出了这么一个弹出的网页层效果,你点击按钮后就可以看到一个渐出的可关闭的弹出层,点击关闭后,当然也是渐渐的消失的,移动时根据鼠标位置计算控件左上角的绝对位置,松开鼠标后停止移动并恢复成不透明. 运行效果截图如下: 在线演示地址如下: http://demo.jb51

  • layer.open组件获取弹出层页面变量、函数的实例

    最近做项目遇到个问题 使用layer.open组件弹出层,需要将该弹出层抽取城单独的公共页面,因此需要在主页面获取弹出层页面的相关变量或者函数值. 记录下解决办法. 先来看layer.open函数 再来看弹出层URL对应的页面关键代码 将表单序列化成JS对象的函数是自己封装的一个JS函数,这里就不细说了,也可以自己手动定义个JS对象,自己给该对象添加属性 最后来看主页面调用方式 打印回调函数接收的变量可以看到,获取到弹出层内用户操作的相关数据. 最后,其实关键点就在于获取ifream中指定变量或

  • javascript 弹出层组件(升级版)

    这次还是利用原来代码的组织结构重新加强了功能,目前来说还有两个小问题,第一个是ie6下自定义弹出层会出现无法遮住select的情况,目前还没加入到组件里,可以自己在自定义的div里面加上ifame来遮罩,组件自带的弹出层可以遮住.第二个问题,由于是绝对定位,所以在改变浏览器窗口大小的时候会出现无法自动跟随.大家试试就知道了,当然问题肯定不少,只是这两个我认为比较重要的,暂时列出来,以后修复. 下面是代码,里面都有注释,可以直接运行. 在线演示 http://demo.jb51.net/js/20

  • Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法

    这两天要用到正好练练手,比想象中碰到的问题要多,比如: ie6背景透明 ie6居中显示 还有对js对象的理解 openID=显示按钮,conID=需要显示的div,closeID=关闭按钮 解决了: 1.可以遮挡ie6下的select元素 但是在ie6下div没有透明度 2.弹出的div可以一直在浏览器屏幕中间显示 问题: 1.目前不支持.class 只支持#id 2.需要显示的div需要自己设置css 3.在ie6下需要设置css 例如div {_position: absolute;_top

  • JS实现从网页顶部掉下弹出层效果的方法

    本文实例讲述了JS实现从网页顶部掉下弹出层效果的方法.分享给大家供大家参考.具体如下: 这里介绍的JavaScript动画背景出层,实现从网页顶部掉下来的感觉,停止时还带有缓冲弹跳的意思,从上到下显示的动画弹出层,带关闭功能,没有怎么美化,喜欢的用时候息动手美化下,觉得不错. 运行效果如下图所示: 具体代码如下: <HTML><HEAD><TITLE>窗口从上掉下来</TITLE> </HEAD> <BODY bgColor=#fef4d9

随机推荐