目的：XXXX项目中，很多的弹窗是利用freemarker的网页标签追加的形式实现的，网页弹框只是将隐藏的div显示出来，这样会使网页在预加载时速度变慢，增加页面加载和响应时间
解决方法如下：<已分中心管理的添加分中心弹框实现机制为例>
1.弹框页面部分的html代码和css抽离
html : html/configure/layer-win/_group-add-layer.html
css : css/common/componnentWin.css <自定义弹窗通用样式>
子层html: _group-add-layer.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>group Add</title> </head> <link type="text/css" href="" /> <link type="text/css" href="" /> <body> ···· </body> <script type="text/javascript" src=""></script> <script type="text/javascript" src=""></script> <script type="text/javascript" src=""></script> <script type="text/javascript" src=""></script> <script type="text/javascript"> </script> </html>
父层html : group-manager.html
<#include "/html/config/configure.html"/> <@menuConfig likey="stationGroup"> <link type="text/css" href="https://www.jb51.net/${contextPath}/css/configure/group-manager.css" /> <link type="text/css" href="https://www.jb51.net/${contextPath}/css/lib/userLibs/page-plugin.css"> <script type="text/javascript" src="https://www.jb51.net/${contextPath}/js/lib/layer/layer.js"></script> <script type="text/javascript" src="https://www.jb51.net/${contextPath}/js/lib/userLibs/page-load.js"></script> <script type="text/javascript" src="https://www.jb51.net/${contextPath}/js/scooper/scooper.tool.xiacy.js"></script> <script type="text/javascript" src="https://www.jb51.net/${contextPath}/js/configure/group-manager.js"></script> ····· </@menuConfig>
通用弹窗 html :
<div id = "addNewGroupWin" class = "capsule-win show"> <div class = "capsule-win-top" title = "添加分中心"><span>添加分中心</span></div> <div class = "capsule-win-center"> <div class = "capsule-item" id = "oldDevSearch"> <div class = "item-left input_required" >名称</div> <div class = "item-right"> <input id = "newGroupName" class = "sc_validate" title = "分中心名称" type="text" placeholder="请输入分中心名称" scvalidate='{"required":true,"format":"string"}'/> </div> </div> <div class = "capsule-item"> <div class = "item-left input_required">经度</div> <div class = "item-right"> <input id = "newGroupLng" class = "sc_validate" title= "分中心经度" type="text" placeholder="请输入0-180的数字" scvalidate='{"required":true,"format":"lng"}'/> </div> </div> <div class = "capsule-item"> <div class = "item-left input_required">纬度</div> <div class = "item-right"> <input id = "newGroupLat" class = "sc_validate" title = "分中心纬度" type="text" placeholder="请输入0-90的数字" scvalidate='{"required":true,"format":"lat"}'/> </div> </div> <div class = "capsule-item" id = "processSNOLDIV"> <div class = "item-left input_required">描述</div> <div class = "item-right"> <textarea id = "newGroupDesc" class = "sc_validate" title = "分中心描述" scvalidate='{"required":true,"format":"string"}'></textarea> </div> </div> </div> <div class = "capsule-win-bottom"> <input class = "btn-bottom centerfix btn-succ" type="button" value="确定"/> <input class = "btn-bottom btn-cancel" type="button" value="取消"/> </div> </div>
2.子父层都需要引入layer.js
3.子层js
/** * <分中心管理> * 添加分中心 * Author : Yiyuery * Date : 2016/10/19 */ ;(function($,w,document,undefined){ $(document).ready(function(){ validatorInit(); clickEventBind(); }); var addGroupValidator = new Validator(); var contextPath = "/ZJDZYW"; /** * 表单验证初始化 * @returns */ function validatorInit(){ addGroupValidator.init(function(obj, msg){ layer.tips(msg,obj,{ style: ['background-color:#78BA32; color:#fff', '#78BA32'], maxWidth:185, time: 2000, tips: 1, }); }); } /** * 点击事件绑定 * @returns */ function clickEventBind(){ addNewGroupClick(); } /** * 分中心相关点击事件 * @returns */ function addNewGroupClick(){ $("#addNewGroupSure").click(function(){ addNewGroupSure(); }); $("#addNewGroupCancle").click(function(){ addNewGroupCancle(); }); } /** * 添加新的分中心 [确定] * @returns */ function addNewGroupSure(){ validatorInput(); } /** * 添加分中心 [取消] */ function addNewGroupCancle(){ closeLayerWin(); } /** * 关闭当前打开的layer弹窗 */ function closeLayerWin(){ var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index); //再执行关闭 } /** * 表单提交输入验证 */ function validatorInput(){ /** * 输入校验 */ if(!addGroupValidator.validate("addNewGroupWin")){ return; } var paras = { "group_name" : $("#newGroupName").val(), "longitude" : $("#newGroupLng").val(), "latitude" : $("#newGroupLat").val(), "group_desc" : $("#newGroupDesc").val(), }; $.ajaxSettings.async = false ; $.getJSON(contextPath+"/stationGroup/add", paras, function(resp){ if(resp.code !=undefined && resp.code == 0){ console.log("分中心列表刷新！"); } }); $.ajaxSettings.async = true ; closeLayerWin(); } })(jQuery,window,document);
4.父层js