首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于Layer+jQuery的自定义弹框

Posted in Javascript onMay 26, 2020

目的：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 rel="stylesheet" type="text/css" href="../../../js/lib/datePicker/skin/WdatePicker.css" />
<link rel="stylesheet" type="text/css" href="../../../css/common/componnentWin.css" />
<body>
 ····
</body>
<script type="text/javascript" src="../../../js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../../../js/lib/layer/layer.js"></script>

<script type="text/javascript" src="../../../js/scooper/scooper.tool.xiacy.js"></script>
<script type="text/javascript" src="../../../js/configure/layer-win/group-new-add.js"></script>
<script type="text/javascript">

</script>
</html>

父层html : group-manager.html

<#include "/html/config/configure.html"/>
<@menuConfig likey="stationGroup">

  <link rel="stylesheet" type="text/css" href="${contextPath}/css/configure/group-manager.css" />
  <link rel="stylesheet" type="text/css" href="${contextPath}/css/lib/userLibs/page-plugin.css">

  <script type="text/javascript" src="${contextPath}/js/lib/layer/layer.js"></script>  
  <script type="text/javascript" src="${contextPath}/js/lib/userLibs/page-load.js"></script>
  <script type="text/javascript" src="${contextPath}/js/scooper/scooper.tool.xiacy.js"></script>  
  <script type="text/javascript" src="${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 id="addNewGroupSure" class = "btn-bottom centerfix btn-succ" type="button" value="确定"/>
    <input id="addNewGroupCancle" 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

$("#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 class="groupItemDiv" id='+obj.id+'>' 
     + '<img class="checkBoxLeftSite" src="'+contextPath+'/image/Checkbox.png"/>'+obj.group_name+"("+count+")"+'<li title="编辑" class="editGroup"></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;
}

最终效果：

基于Layer+jQuery的自定义弹框

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

基于Layer+jQuery的自定义弹框

- Author -

Yiyuery

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js动态改变select选择变更option的index值示例
Jul 10 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
May 11 Javascript
javascript图片预加载实例分析
Jul 16 Javascript
JS+CSS实现美化的下拉列表框效果
Aug 11 Javascript
jQuery多级联动下拉插件chained用法示例
Aug 20 Javascript
JS实现表单验证功能(验证手机号是否存在，验证码倒计时)
Oct 11 Javascript
jQuery中Nicescroll滚动条插件的用法
Nov 10 Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
jQuery中extend函数简单用法示例
Oct 11 jQuery
使用js原生实现年份轮播选择效果实例
Jan 12 Javascript
Ajax是什么？Ajax高级用法之Axios技术
Apr 21 Javascript
微信开发 js实现tabs选项卡效果
Oct 28 #Javascript
微信开发 使用picker封装省市区三级联动模板
Oct 28 #Javascript
Easyui的组合框的取值与赋值
Oct 28 #Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 #Javascript
Jquery UI实现一次拖拽多个选中的元素操作
Dec 01 #Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 #Javascript
jQuery.datatables.js插件用法及api实例详解
Oct 28 #Javascript
Delphi面试题(13) UNIX面试题(27) EJB面试题(46) Servlet面试题(20) Ruby面试题(15) SOA面试题(9) PYTHON面试题(27) J2EE面试题(19) MySQL面试题(19) Javascript面试题(44)
You might like
php中的登陆login
2007/01/18 PHP
PHP面向对象程序设计组合模式与装饰模式详解
2016/12/02 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
2014/05/08 Javascript
一个不错的js html页面倒计时可精确到秒
2014/10/22 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
精通JavaScript的this关键字
2020/05/28 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
Bootstrap源码解读排版（1）
2016/12/23 Javascript
Bootstrap select实现下拉框多选效果
2016/12/23 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
2017/03/07 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
JS实现旋转木马轮播图
2020/01/01 Javascript
JavaScript 替换所有匹配内容及正则替换方法
2020/02/12 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
[28:48]《真视界》- 2017年国际邀请赛
2017/09/27 DOTA
在python的WEB框架Flask中使用多个配置文件的解决方法
2014/04/18 Python
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
Django启动时找不到mysqlclient问题解决方案
2020/11/11 Python
python简单实现插入排序实例代码
2020/12/16 Python
2分钟教你实现环形/扇形菜单(基础版)
2020/01/15 HTML / CSS
宝拉珍选澳大利亚官方购物网站：Paula’s Choice澳大利亚
2016/09/13 全球购物
美体小铺加拿大官方网站：The Body Shop加拿大
2016/10/30 全球购物
小学教师自我鉴定
2013/11/07 职场文书
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
科学发展观标语
2014/10/08 职场文书
小学英语教师研修感悟
2015/11/18 职场文书
世界十大评分最高的动漫，CLANNAD上榜，第八赚足人们眼泪
2022/03/18 日漫
Java对文件的读写操作方法
2022/04/29 Java/Android
Golang并发工具Singleflight
2022/05/06 Golang