一、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"htmlcode">
<a href="javascript:void(0);" rel="external nofollow" class="a1" <br>οnclick="openLayerUrl('@domainTeamUrl/Notice/Update">修改</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弹出层组件在多个弹出层场景使用及传参方法,包括非嵌套弹出层和嵌套弹出层打开与关闭方法。希望能给大家一个参考,也希望大家多多支持。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新日志
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]