$("#addGroup").click(function(){ layer.config({ path : '${contextPath}/js/lib/layer' }); index = layer.open({ type: 2, area: ['520px', '400px'], fix: false, //不固定 title: '', maxmin: false, scrollbar:false, shade:0.5, shadeColse:true, content:capsule.request.path.groupMan.layer.groupManAddLayerShow, end:function(){ loadGroupCenterInfo(); } }); });
loadGroupCenterInfo :父层js的方法，在关闭layer弹窗时调用父层方法刷新分中心列表
5.父层的layer弹窗此处是无法跳出父页面的所嵌套的iframe的，由于添加分中心的操作loadGroupCenterInfo，中嵌套着点击事件的重新激活clickEventInit该方法不是全局的，无法通过end传递到父页面中再次执行
/** * 加载分中心 */ function loadGroupCenterInfo(){ $.ajaxSettings.async = false ; $.getJSON(capsule.request.path.groupMan.getJson.loadCenterGroup,{},function(data){ $("#groupCenterArea").empty(); $.each(data.list,function(i,obj){ groupMap.setKeyValue(obj.id,obj.group_name); var count = obj.c_num; if(obj.c_num == null || obj.c_num == "null"){ count = 0; } var html = '<div>' + '<img src="'https://www.jb51.net/+contextPath+'/image/Checkbox.png"/>'+obj.group_name+"("+count+")"+'<li title="编辑"></li></div>'; $("#groupCenterArea").append(html); }); clickEventInit(); }); $.ajaxSettings.async = true ; }
因此:当回调函数涉及当前层的函数互相调用时，是无法使用通用layer最外层弹框来实现的，只能在当前页面的js中重新模块化引入layer
[后来发现，其实是可以的，只需要将回调函数直接写在调用方法中即可，参见：javascript中的方法回调和父页面Iframe的方法调用]
layer.config({ path : '${contextPath}/js/lib/layer' }); index = layer.open({ type: 2, area: ['520px', '400px'], fix: false, //不固定 title: '', maxmin: false, scrollbar:false, shade:0.5, shadeColse:true, content:capsule.request.path.groupMan.layer.groupManAddLayerShow, end:function(){ loadGroupCenterInfo(); } });
6.通用弹窗样式css
@charset "utf-8"; /*-------功能性按钮------*/ body,html{ width:100%; height:100%; margin:0px; padding:0px; } .capsule-btn { height: 40px; width: 50px; background-color: #5093e1; border: 0; border-radius: 2px; color: #fff; margin: 15px 0px 10px 15px; float: left; } /*----------------------------------------- 弹框按钮 -------------------------------------*/ .capsule-win .btn-bottom{width: 100px; height: 40px; background-color: #4f94e0; font-size: 16px; border: none; color: #fff; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; cursor: pointer; margin-right: 10px;margin-top: 10px;} .centerfix{margin-left: 30%;} .btn-cancel {background-color: #f5f5f5 !important; border: 1px #c2c2c2 solid !important;; color: #333 !important;} .btn-succ {background-color: #1abd9b;} .btn-warn {background-color: #ec962f;} /*------------弹窗---------------*/ .capsule-win { width: 100%; min-height: 100%; -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; background-color: #fff; display: none; position: fixed; } .capsule-win-top { width: 100%; height: 50px; background-color: #4f94e0; line-height: 50px; color: #fff; font-size: 16px; } .capsule-win-center { width: 100%; min-height: 250px; padding: 20px 0px 20px 0px; margin:0px 1px 0px 1px; } .capsule-win-bottom { width: 100%; height: 60px; background-color: #ececec; padding: 0px; position: fixed; bottom: 1px; } .capsule-win-center .capsule-item { height: 50px !important; width: 100%; margin: 0px 2px 0px 2px; padding: 0px; } .capsule-win-center .capsule-item .item-left { width: 100px; text-align: right; margin: 10px 0px 0px 0px; float:left; } .capsule-win-center .capsule-item .item-right { width: 400px; float:right; } .capsule-win-center .capsule-item .item-right input[type=text]{ width:75%; height: 35px; } .capsule-win-center .capsule-item .item-right input[type=checkbox]{ width:20px; marin:2px -5px 2px 0px; padding:10px; } .capsule-win-center .capsule-item .item-right textarea{ width:75%; height:50px; margin-bottom: 10px; overflow-y:auto; } .capsule-win-center .capsule-item .item-right select{ width:90%; } .hide{ display : none; } .show{ display : block; } .capsule-win-center .capsule-item-table{ width: 445px; height: 120px; margin: 5px 10px 0px 75px; overflow-y:auto; } .capsule-win-center .capsule-item-table table{ border-collapse:collapse; width:100%; } .capsule-win-center .capsule-item-table table,th, td{ border: 1px solid #ccc; } .capsule-win-center .capsule-item-table th{ height:30px; text-align: center; } .capsule-win-center .capsule-item-table td{ text-align: center; } .capsule-win-center .capsule-item-table input[type=text] { width:100% !important; } .textCenter { text-align: center; } .capsule-win-top span { margin : 10px; }
最终效果：
