基于图层jQuery的自定义弹框

目的：XXXX项目中，很多的弹窗是利用自由标记的网页标签追加的形式实现的，网页弹框只是将隐藏的差异显示出来，这样会使网页在预加载时速度变慢，增加页面加载和响应时间

解决方法如下：已分中心管理的添加分中心弹框实现机制为例

1.弹框页面部分的超文本标记语言代码和钢性铸铁抽离

html : html/configure/layer-win/_ group-add-layer。html CSS : CSS/common/component win。半铸钢钢性铸铁(Cast Semi-Steel)自定义弹窗通用样式子层html: _group-add-layer.html

！' DOCTYPE html html heartheta charset=' UTF-8 '标题组Add/title/headlink rel='样式表type='text/css' href='./././js/lib/日期选择器/skin/wdatepicker。CSS '/link rel='样式表type='text/css' href='./././CSS/common/componentwin。CSS '/body/body脚本类型=' text/JavaScript ' src=' http :/././js/jquery-1。9 .1 .js/script脚本类型=' text/JavaScript ' src=' http :/././js/lib/layer/layer。js '/script脚本类型=' text/JavaScript ' src=' http :/././js/scopper/scopper。工具。夏西。js/'脚本脚本类型=' text/JavaScript ' src=' http :/././js/configure/layer-win/group-new-add。js '/script脚本类型=' text/JavaScript '/script/html父层html : group-manager.html

# include '/html/config/config。html '/@ menuConfig like y='站组' link rel='样式表type=' text/CSS ' href=' $ { context path }/CSS/configure/group-manager。CSS '/link rel='样式表type=' text/CSS ' href=' $ { context path }/CSS/lib/userLibs/page-plugin。CSS '脚本类型=' text/JavaScript ' src=' http 3360通用弹窗html :

div id=' addNewGroupWin ' class=' capsule-win show ' div class=' capsule-win-top ' title='添加分中心跨度添加分中心/span/div class='胶囊-win-center' div class='胶囊-item ' id=' oldDevSearch ' div class=' item-left input _ required '名称/div class=' item-right '输入id=' NewGroupName ' class=' sc _ validate ' title='分中心名称type='text '占位符='请输入分中心名称scvalidate=“{”必需：true，“format”:“string” //div/div class='胶囊-项目' div class='项目-左输入_必需'经度/div class=' item-right '输入id='新集团液化天然气' class=' sc _ validate ' title='分中心经度type='text '占位符='请输入0-180的数字scvalidate=“{”必需：true，' format ' : ' LNG ' } '//div/div class='胶囊-项目' div class='项目-左输入_必需'纬度/div class=' item-right '输入id=' NewGroupLat ' class=' sc _ validate ' title='分中心纬度type='text '占位符='请输入0-90的数字scvalidate=“{”必需：true，“format”:“lat” //div/div class=' capsule-item ' id=' processSNOLDIV ' div class=' item-left input _ required '描述/div class=' item-right '文本区域id=' NewGroupDesc ' class=' sc _ validate ' title='分中心描述scvalidate=“{”必需：true，' format ' : ' string ' } '/text area/div/div class=' capsule-win-bottom '输入id=' addnewgroup sure ' class=' BTN-底部中心修复BTN-成功' type=' button ' value='确定/input id=' addnewgroupcanle ' class=' BTN-BTN底部-取消' type=' button ' value='取消//div /div2 . 子父层都需要引入layer.js

3.子层射流研究…

/** * 分中心管理* 添加分中心*作者： Yiyuery *日期： 2016/10/19 */;（函数($，w，document，undefined){ $(document).ready(function(){ validatorInit()；单击事件绑定();});var add group Validator=new Validator()；var上下文路径='/zjdyw '；/** * 表单验证初始化* @返回*/function validatorInit(){ AddGroupValidator。init(function(obj，msg){ layer.tips(msg，obj，{ style :[' background-color : # 78ba 32；color:#fff '，' #78BA32']，maxWidth:185，time: 2000，tips: 1，})；});} /** * 点击事件绑定* @返回*/函数ClickEventBind(){ addnewgroup click()；} /** * 分中心相关点击事件* @返回*/函数addnewgroup单击(){ $(' # addnewgroup sure ').单击(function(){ addNewGroupSure()；});$(' # addnewgroupcanle ').单击(function(){ addnewgroupcanle()；});} /** * 添加新的分中心[确定]* @返回*/函数addNewGroupSure(){ validatorInput()；} /** * 添加分中心[取消] */函数addnewgroupcanle(){ closeLayerWin()；} /** * 关闭当前打开的层弹窗*/function closeLayerWin(){ var index=parent。层。getframeindex(窗口。姓名)；parent.layer.close(索引);//再执行关闭} /** * 表单提交输入验证*/function validatorInput(){/* * *输入校验*/if(！添加组验证器。验证(' AddNewGroupWin '){ return；} var paras={ ' group _ name ' : $(' # new group name ').val()，'经度：美元.val()，' latitude' : $('#newGroupLat ').val()，' group _ desc ' : $(' # new group desc ').val()，}；$ .ajaxSettings.async=false$。getJSON(上下文路径'/站组/add '，段落，函数(resp){ if(resp.code！=未定义的响应。代码==0){控制台。日志('分中心列表刷新!');} });$ . AJaxssettings . async=TrueCloseLayerwin()；}})(jQuery，窗口，文档);4.父层射流研究…

$('#addGroup ').单击(function(){ layer。config({路径： ' $ {上下文路径}/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。请求。路径。追星族。层。Groupmanaddlayershow，end : function(){ LoadGroupCenterInfo()；} });});loadGroupCenterInfo :父层射流研究…的方法，在关闭层弹窗时调用父层方法刷新分中心列表

5.父层的层弹窗此处是无法跳出父页面的所嵌套的内联框架的，由于添加分中心的操作loadGroupCenterInfo，中嵌套着点击事件的重新激活单击事件初始化该方法不是全局的，无法通过目标传递到父页面中再次执行

/** * 加载分中心*/函数LoadGroupCenterInfo(){ $。AJaxsettings。async=false$.getJSON(胶囊。请求。路径。追星族。getJSON。LoadCenterGrouP，{}，函数(数据){ $(' # GroupCentarea ').empty()；$.每个(data.list，function(i，obj){ GroupMap。SetKeyValue(obj。id，obj。group _ name)；var count=obj.c _ numif(obj。c _ num==null | | obj。c _ num==' null '){ count=0；} var html=' div class=' GroupItemDiv ' id=' obj。id ' ' ' img class=' CheckBoxLeftSite ' src=' http : '上下文路径'/image/Checkbox。png '/' obj。group _ name '(' count ')' Li title='编辑class=' editGrouP '/Li/div '；$(' # GroupCentarea ').追加(html)；});单击事件初始化();});$ .ajaxSettings.async=true}因此：当回调函数涉及当前层的函数互相调用时，是无法使用通用层最外层弹框来实现的，只能在当前页面的射流研究…中重新模块化引入层[后来发现，其实是可以的，只需要将回调函数直接写在调用方法中即可，参见：javascript中的方法回调和父页面内联框架的方法调用]

层。config({路径： ' $ {上下文路径}/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。请求。路径。追星族。层。Groupmanaddlayershow，end : function(){ LoadGroupCenterInfo()；} });6.通用弹窗样式钢性铸铁

@ charset“utf-8”；/* - 功能性按钮- */body，html { width :100%；高度：100%;margin:0pxpadding:0px}。胶囊-BTN {高度： 40px宽度： 50px背景色： # 5093 E1；边框： 0；边界半径： 2pxcolor : # fffmargin 3360 15px 0px 10px 15px向左浮动：}/* - 弹框按钮- */.胶囊赢了BTN底部{宽度： 100像素高度： 40px背景-颜色： # 4f 94e 0；font-size : 16pxborder:无；color : # fff-moz-border-radius : 3px；-khtml-边界-半径： 3px-网络套件-边框-半径： 3px边界半径： 3px光标：指针；右边距： 10px页边距-top : 10px；}.居中固定{左边距-:30%；}.BTN-取消{背景色： # F5 F5！重要；border: 1px # c2c2c2固体！重要；color: #333！重要；}.BTN-成功{背景色： # 1 abd9b}.BTN-警告{背景色： # EC 962 f；}/* - 弹窗- */.胶囊缠绕{宽度： 100%;最小高度： 100%;-moz-border-radius : 5px；-khtml-边界-半径： 5px-web套件-边框-半径： 5px背景-color : # fff；显示器：无；位置：固定；}.胶囊-缠绕-顶部{宽度： 100%;高度： 50px背景-颜色： # 4f 94e 0；线高： 50pxcolor : # ffffont-size : 16px；}.胶囊缠绕中心{宽度： 100%;最小高度： 250像素；padd : 20px 0px 20px 0pxmargin :0 px 1px 0px 1px }。胶囊-卷绕-底部{宽度： 100%;高度： 60px背景色： # ECE CECpadding: 0px位置：固定；bottom: 1px}。胶囊双赢中心。胶囊-项目{ height: 50px！重要；宽度： 100%;margin : 0px 2px 0px 2px adding : 0px }。胶囊双赢中心。胶囊物品。项目-左侧{ width : 100 pxtext-align :右侧；margin : 10px 0px 0px 0pxfloat 3360 left }。胶囊双赢中心。胶囊物品。项目-右侧{宽度： 400像素右浮动：}.胶囊双赢中心。胶囊物品。项目-右输入[type=text]{ width :75%；高度：35px }。胶囊双赢中心。胶囊物品。项目-右输入[type=checkbox]{ width :20 px；marin :2 px-5px 2px 0px；padding:10px }。胶囊双赢中心。胶囊物品。项目-右侧文本区域{宽度：75%；高度：50 px边距-底部： 10px溢出-y :汽车；} .胶囊双赢中心。胶囊物品。项目-右键选择{宽度：90%；}.隐藏{显示：无；}.显示{显示器：块；}.胶囊双赢中心。胶囊物品表{ width: 445px高度： 120像素；margin: 5px 10px 0px 75px溢出-y :汽车；}.胶囊双赢中心。胶囊-物品-表格{边框-折叠：折叠；宽度：100%;}.胶囊双赢中心。胶囊项目表，th，td{ border: 1px固体# ccc}。胶囊双赢中心。胶囊-项目-表格th { height:30px文本对齐：中心；}.胶囊双赢中心。胶囊-物品-表格TD { text-align : center}.胶囊双赢中心。胶囊-物品-表格输入{ width:100%！重要；}.text CentER { text-align : CentER；}.胶囊-win-top span { margin : 10px；}最终效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。