layer实现关闭弹出层刷新父界面功能详解

方案一:

在layer弹出层中调用父界面重新加载函数

?


1

2

3

window.parent.location.reload();

varindex = parent.layer.getFrameIndex(window.name);

parent.layer.close(index);

方案二:

调用layer插件的end回调方法:

end - 层销毁后触发的回调

类型:Function,默认:null

无论是确认还是取消,只要层被销毁了,end都会执行,不携带任何参数。

父窗口打开layer弹出框时,添加end回调

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

functionopenLayer() {

//iframe层

parent.layer.open({

type: 2,

title:‘修改‘,

shadeClose:false,//点击遮罩关闭

shade: 0.8,

area: [‘30%‘,‘45%‘],

maxmin:true,

closeBtn: 1,

content: [url,‘yes‘],//iframe的url,yes是否有滚动条

end:function() {

location.reload();

}

});

layer弹出框处理完成之后,就不需要调用其他刷新操作函数了,直接关闭就行了

?


1

2

varindex = parent.layer.getFrameIndex(window.name);

parent.layer.close(index);

相比较而言,第一种方案会更佳,因为在操作逻辑上,手动关闭弹出框,应该不触发刷新操作,只有当弹出框的处理逻辑执行成功后,调用函数关闭弹出框才触发父界面刷新操作,基于这个逻辑,应该选择方案一。方案二,不管怎样都会刷新页面,实际上无端的增加了服务器的处理压力。

方案二:可以解决子页面处理后的结果发送给子页面的父页面的问题。

对于layer.js出现回调关闭父类的弹出层时,之前的表单的submit失效的问题:

如何解决:网上有很多,有的是转为ajax的请求,在数据传输完再关闭父类的弹出层:

下面是关闭父弹出层的办法:

?


1

2

varindex = parent.layer.getFrameIndex(window.name);//获取窗口索引

parent.layer.close(index);// 关闭layer

采用ajax这样可以,但是我做的是支付,要弹出页面才能支付,不能转换为ajax,怎么帮?后面我老大说:“你就不能晚点执行关闭吗”?这是一个想法试了一下就好了。

附上代码:

?


1

2

3

4

5

$("#myForm").submit();

varindex = parent.layer.getFrameIndex(window.name);//获取窗口索引

setTimeout(function() {

parent.layer.close(index);// 关闭layer

},500);

我还需要在关闭父类窗口后再打开一个窗口,则怎么解决,后面发现layer.js留有一个好的方式,那就是调用父窗口的方法,这个不受子窗口的影响,通过:parent.父类方法名(参数)这样就可以了,在父窗口中再调用layer.js的弹出就好了。

原文地址:https://www.cnblogs.com/xiaogou/p/11659852.html

时间: 2024-10-24 11:36:23

layer实现关闭弹出层刷新父界面功能详解的相关文章

jquery Jbox 插件实现弹出窗口在修改的数据之后,关闭弹出窗口刷新父页面的问题

http://blog.csdn.net/nsdnresponsibility/article/details/51282797 问题如题: 这里我们在父页面定义一个全局的变量来标识是否需要刷新父页面(声明:下图中点击保存页面之后,不关闭子页面):点击1出弹出窗口: 我们的目的是:如果,用户保存过数据:在点击关闭按钮和2处所指的小X时,刷新父列表页面:若果用户没有保存过数据,关闭窗口是不刷新父列表页面. //这里是父页面(列表页面) var isFreshFlag="1";<%-

layer弹出层框架alert与msg详解

layer--->web弹层组件 代码: 1 layer.alert('见到你真的很高兴', {icon: 6}); 这是一个最简单的弹出层,可根据icon配置左边的图标 通常情况下,除了弹窗之外我们一般都会有对按钮做回调处理的一些操作 如图: 1 layer.alert('墨绿风格,点击确认看深蓝', { 2 skin: 'layui-layer-molv' //样式类名 自定义样式 3 ,closeBtn: 1 // 是否显示关闭按钮 4 ,anim: 1 //动画类型 5 ,btn: ['

layer 打开关闭弹出窗口与获取父窗口值

一.首先引用js文件 <script src="../../js/common/layer/layer.js"></script> 二.全屏调用以下代码 var index = layer.open({                       type: 2,                       content: url,                       area: ['300px', '195px'],                 

layer关闭弹出层,弹出打印

常规的话,下面能够完成关闭弹出层 var index = parent.layer.getFrameIndex(window.name); //延迟关闭 解决打印窗口弹不出来的情况 parent.layer.close(index); 可是当这里需要关闭的同时弹出打印窗口的时候,就会发现失效了,能关闭,可是打印窗口同时也弹不出了. 这里的解决办法就是:延迟关闭. $("#ReviewArea").jqprint({ debug: false, //如果是true则可以显示iframe查

jQuery点击自身以外地方关闭弹出层

$(function(){ $(document).bind("click", function (e) { if($(e.target).closest("#txt").length>0){ $("#tip").show(); }else{ $("#tip").hide(); } }); }); closest会首先检查当前元素是否匹配,如果匹配则直接返回元素本身.如果不匹配则向上查找父元素,一层一层往上,直到找到匹配

按esc键关闭弹出层

jquery中获取键盘按键 测试浏览器:IE6/IE7/IE8,FireFox,Chrome,Opera $(document).keyup(function(e){ var key =  e.which; if(key == 27){ alert('按下了ESC键,关闭弹出层'); } }); 或者(这个只在:IE8,FireFox,Chrome测试过) $(document).keyup(function(e){ if (e.keyCode == 27) { alert('按下了ESC键,关

jQuery点击空白关闭弹出层

给宝箱加上click事件,单击切换弹出层显示与隐藏,弹出层显示后单机任何地方都能让它关闭. 这里用到了one()指令,给body绑定一个单次的操作,jQuery代码如下: $('#info li:eq(0)').click(function(){ $('#iphone').toggle(); $('body').one('click',function(){ $('#iphone').hide(); }) return false; }) 实际上该处应该是点击非自身的空白(弹出层也算自身)关闭弹

Vue SPA应用中使用Layer的iframe 弹出层,并且传值

问题来源: BOOS 竟然说喜欢有可移动可最大化的弹出层,这!!! SPA 模式下就是这种引入Vue.js的写法 layer.open({ type: 2, area: ['840px', '550px'], fixed: false, //不固定 maxmin: true, title:title, content:url, }); 正常引入layui.js  然后弹出,然后弹出层要调用父级层的方法,和赋值 var index = parent.layer.getFrameIndex(wind

jquery 点击弹出层自身以外的任意位置,关闭弹出层

<!--弹出层---> <div class="mask">    <div class="wrap"></div> </div> /***弹出层效果***/ $(".header").find(".a5").click(function(e){ e.stopPropagation();//阻止冒泡 $('.mask').css("display"