html 弹出层 传参数,layer iframe 弹框与主页面之间传值

前言

早就同说过 layer 的大名，但是真正使用起来，还是在今年。

之前一直用的是 jquery confirm 插件：jQuery Impromptu， 点我进入。因为弹框的标题和内容都可以自定义，所以可以构建出简单的页面弹出框(与主页面同源，样式脚本都可以通用)。然后就碰到一些需要在弹出层上提交表单之类的操作，这是 improptu 不能满足的。

当然可以用 bootstrap 框架携带的模态框(model 弹出层)，但考虑到系统整体使用情况，还是选择了已经在使用的 layer。

因为是 iframe 弹框，所以会涉及到弹框与主页面之间传值的问题。以下为整理的内容。

弹框示例//页面一打开就执行，放入 ready 是为了 layer 所需配件(css、扩展模块)加载完毕

layer.ready(function(){

layer.open({

type: 2, // 代表 iframe 弹框

title: '欢迎页',

maxmin: true,

area: ['800px', '500px'],

content: 'http://layer.layui.com/test/welcome.html',

btn: ['确定', '不需要，直接跳过'],

success: function(index, layero){

// 层弹出后的成功回调

}

yes: function(index, layero){

//按钮【按钮一】的回调 确定按钮回调

var body = layer.getChildFrame('body', index);

var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();

var catid = '';

body.find('input[type="checkbox"][name="catid"]:checked').each(function (i) {

catid += $(this).val()+',';

});

catid = catid.substr(0, catid.length-1);

if (catid === '') {

layer.msg('请选择信息推送的用户组！');

return false;

}

var title = body.find('#title').val();

var content = iframeWin.editor.html();

layer.close(layerid);

...

},

btn2: function(index, layero){

//按钮【按钮二】的回调

//return false 开启该代码可禁止点击该按钮关闭

},

cancel: function(){

//右上角关闭回调

//return false 开启该代码可禁止点击该按钮关闭

}

end: function(){

// 层销毁后触发的回调

layer.tips('Hi', '#about', {tips: 1})

}

});

});

从主页面传值到弹出层页面

当然可以直接把参数拼接在请求的 url 中，其他方法：var body = layer.getChildFrame('body', index);

var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();

从弹出层页面传值到主页面parent.$("#handle_status").val('1');

在主页面关闭弹框var index = layer.open(...);

layer.close(index);

在弹框页面关闭弹框var index = parent.layer.getFrameIndex(window.name);

parent.layer.close(index);