首页
所有分类
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 相关文章推荐
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
Dec 26 Javascript
JavaScript计算某一天是星期几的方法
Aug 05 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
Jan 20 Javascript
微信小程序 合法域名校验出错详解及解决办法
Mar 09 Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 Javascript
AngularJS 应用模块化的使用
Apr 04 Javascript
基于Vue实现拖拽效果
Apr 27 Javascript
vue axios post发送复杂对象问题
Jun 04 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 Javascript
解决vue动态下拉菜单 有数据未反应的问题
Aug 06 Javascript
（开源）微信小程序+mqtt，esp8266温湿度读取
Apr 02 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
柱状图(1) 追加文本(1) Pytesseract(1) flex-shrink(1) 验证码(1) 匹配文本(1) 文字识别(1) flex(1) GNN(1) SFTP(3)
You might like
PHP实现支持GET,POST,Multipart/form-data的HTTP请求类
2014/09/24 PHP
php获取当月最后一天函数分享
2015/02/02 PHP
PHP随机生成唯一HASH值自定义函数
2015/04/20 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
Prototype使用指南之array.js
2007/01/10 Javascript
JS 时间显示效果代码
2009/08/23 Javascript
jQuery的.live()和.die() 使用介绍
2011/09/10 Javascript
深入理解JavaScript系列(6)：S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
JavaScript插入动态样式实现代码
2012/02/22 Javascript
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
2015/04/16 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
解决jQuery使用JSONP时产生的错误
2015/12/02 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
2016/02/23 Javascript
jQuery插件实现图片轮播特效
2016/06/16 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
2017/07/19 Javascript
vue中计算属性（computed）、methods和watched之间的区别
2017/07/27 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
Matplotlib中文乱码的3种解决方案
2018/11/15 Python
python numpy之np.random的随机数函数使用介绍
2019/10/06 Python
keras的ImageDataGenerator和flow()的用法说明
2020/07/03 Python
详解如何在css3打包后自动追加前缀插件：autoprefixer
2018/12/18 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
雷朋巴西官方商店：Ray-Ban Brasil
2020/07/21 全球购物
领导干部培训感言
2014/01/23 职场文书
部队万能检讨书
2014/02/20 职场文书
优秀食品类广告词
2014/03/19 职场文书
机关党员三严三实心得体会
2014/10/13 职场文书
MySQL sql_mode的使用详解
2021/05/08 MySQL
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python