当前位置: 首页 > Web前端 > JavaScript

layui页面式弹窗控制外层关闭和刷新列表

时间:2023-03-27 16:02:42 JavaScript

当layui弹窗类型为页面弹窗时,调用外部方法关闭很麻烦弹出窗口(因为iframe不在窗口中间)。我们可以将关闭弹窗的操作传递给弹窗。创建一个弹窗,弹窗内容是另外一个添加页面:vardialog=layer.open({type:2,title:"Add",closeBtn:1,id:"detail",area:["100%","100%"],content:"add.html?id="+data.id,zIndex:layer.zIndex,成功:function(layero,index){window[layero.find("iframe")[0]["name"].back=function(cb){cb&&cb();initTable();layui.close()};},});弹窗创建完成后,找到对应的iframe名称,获取对应的在弹窗内部的iframe窗口范围内添加关闭弹窗的功能(获取到的窗口可以添加任何内容,相当于与父窗口建立通信):window[layero.find("iframe")[0]["name"]].back=function(cb){cb&&cb();//callbackinitTable();//是一个刷新列表的函数layui.close()};然后在弹出窗口提交请求后,可以执行当前窗口的back方法返回列表页面:functionsubmitAdd(status){request({url:"/add",isJson:true,数据:JSON.stringify({id:1,status:2,desc:3,}),方法:"post",success:function(res){if(res.code==0){layer.msg(res.description);setTimeout(function(){window.back();},1000);//返回列表页}},error:function(msg){layer.msg("后台错误");},});}