首页
所有分类
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 相关文章推荐
JavaScript中的对象化编程
Jan 16 Javascript
jquery delay（）介绍及使用指南
Sep 02 Javascript
JS模拟实现方法重载示例
Aug 03 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
Jan 13 Javascript
使用vue.js写一个tab选项卡效果
Mar 25 Javascript
layui表格实现代码
May 20 Javascript
JavaScript基础心法 数据类型
Mar 05 Javascript
Node.js Windows Binary二进制文件安装方法
May 16 Javascript
JavaScript判断浏览器运行环境的详细方法
Jun 30 Javascript
layui实现三级联动效果
Jul 26 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
微信开发 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
redo log(1) pt-archiver(1) B+树(2) binlog(2) 存储过程(3) 忘记密码(1) instantclient(1) 写入策略(1) 增删改查(2) 优化(1)
You might like
php的webservice的wsdl的XML无法显示问题的解决方法
2014/03/11 PHP
php使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
Yii2框架自定义验证规则操作示例
2019/02/08 PHP
js技巧--转义符&quot;\&quot;的妙用
2007/01/09 Javascript
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
javascript 原型继承介绍
2011/08/30 Javascript
node.js中的console.warn方法使用说明
2014/12/09 Javascript
javascript图片滑动效果实现
2021/01/28 Javascript
将json转换成struts参数的方法
2016/11/08 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
原生JS实现图片轮播效果
2016/12/26 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
vue中slot（插槽）的介绍与使用
2018/11/12 Javascript
vue项目打包后怎样优雅的解决跨域
2019/05/26 Javascript
Vue实现浏览器打印功能的代码
2020/04/17 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
布同自制Python函数帮助查询小工具
2011/03/13 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
把富文本的回车转为br标签
2019/08/09 HTML / CSS
Probikekit欧盟：在线公路自行车专家
2019/07/12 全球购物
颇特女士香港官网：NET-A-PORTER香港
2021/03/08 全球购物
JPA的优势都有哪些
2013/07/04 面试题
编辑求职信样本
2013/12/16 职场文书
护士在校生自荐信
2014/02/01 职场文书
读书活动总结
2014/04/28 职场文书
大气污染防治方案
2014/05/19 职场文书
奥林匹克运动会口号
2014/06/19 职场文书
七一讲话心得体会
2014/09/05 职场文书
2014最新房贷收入证明范本
2014/09/12 职场文书
2014年保安个人工作总结
2014/11/13 职场文书
2015年高校图书馆工作总结
2015/04/30 职场文书
幼儿园小班教师随笔
2015/08/14 职场文书
MySQL时区造成时差问题
2022/04/13 MySQL