基于Layer+jQuery的自定义弹框(jquery lazyload)

推荐整理分享基于Layer+jQuery的自定义弹框(jquery lazyload)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:基于jquery的框架有哪些,layui的jquery使用,基于jquery的框架有哪些,基于jquery的框架有哪些,layer jquery,layer jquery,layui的jquery使用,jquery layout,内容如对您有帮助，希望把文章链接给更多的朋友！

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

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

1.弹框页面部分的html代码和css抽离

html : html/configure/layer-win/_group-add-layer.htmlcss : css/common/componnentWin.css <自定义弹窗通用样式>子层html: _group-add-layer.html

父层html : group-manager.html

通用弹窗 html :

2.子父层都需要引入layer.js

3.子层js

4.父层js

loadGroupCenterInfo :父层js的方法，在关闭layer弹窗时调用父层方法刷新分中心列表

5.父层的layer弹窗此处是无法跳出父页面的所嵌套的iframe的，由于添加分中心的操作loadGroupCenterInfo，中嵌套着点击事件的重新激活clickEventInit该方法不是全局的，无法通过end传递到父页面中再次执行

因此:当回调函数涉及当前层的函数互相调用时，是无法使用通用layer最外层弹框来实现的，只能在当前页面的js中重新模块化引入layer [后来发现，其实是可以的，只需要将回调函数直接写在调用方法中即可，参见：javascript中的方法回调和父页面Iframe的方法调用]

6.通用弹窗样式css

最终效果：