Layui弹出层的使用
最近开发中使用到点击按钮,弹出小窗口,并在父窗口页面所在js调用子窗口页面所在js的方法,并关闭子窗口,把方法的返回值绑定到子窗口页面input框字段中的功能,在这里总结一下,以便节省此后再次实现此功能时的开发时间。
一、引入js、css
<script src="/static/build/layui.js"></script>
<link rel="stylesheet" href="/static/build/layui.css" media="all">
二、按钮触发的打开弹层事件
function integralSchemeList(){
var integralSchemeListUrl = prefix+"/integralScheme";
layer.open({
id:'integralScheme',
type: 2,
area: ['80%','80%'],
fix: false,
//不固定
maxmin: true,
shade: 0.3,
title: '积分模板',
content:integralSchemeListUrl,
btn: ['确定', '关闭'],
// 弹层外区域关闭
shadeClose: true,
yes: function(index){
var frameId=document.getElementById('integralScheme').getElementsByTagName("iframe")[0].id;//根据弹层id获取子页面对象
var arrays=$('#'+frameId)[0].contentWindow.checkItem();//调用子页面checkItem()方法
if(arrays.length>0){
var integralSchemeIdName='';
var integralSchemeId='';
arrays.forEach(function(val,index){
integralSchemeIdName+=val.name+',';
integralSchemeId+=val.id+',';
})
if(integralSchemeIdName.length>0){
integralSchemeIdName=integralSchemeIdName.substr(0,integralSchemeIdName.length-1);
$("#integralSchemeIdName").val(integralSchemeIdName);//将方法执行的返回值绑定到input输入框
}
if(integralSchemeId.length>0){
integralSchemeId=integralSchemeId.substr(0,integralSchemeId.length-1);
$("#integralSchemeId").val(integralSchemeId);
}
layer.close(index); //仅关闭当前子页面不关闭父页面
}else{
alert("至少选择一条模板才可进行确定操作!");
}
},
cancel: function(index) {
return true;
}
});
}
子页面方法:
function checkItem(){
var arrays = $.btTable.bootstrapTable('getSelections');
return arrays;
}