基于Layer+jQuery的自定义弹框

前端之家收集整理的这篇文章主要介绍了基于Layer+jQuery的自定义弹框前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

目的: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

<div class="jb51code">
<pre class="brush:xhtml;">
<!DOCTYPE html>

<Meta charset="UTF-8"> group Add ····

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

父层html : group-manager.html

<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"&gt; <script type="text/javascript" src="${contextPath}/js/lib/layer/layer.js"&gt;</script> <script type="text/javascript" src="${contextPath}/js/lib/userLibs/page-load.js"&gt;</script> <script type="text/javascript" src="${contextPath}/js/scooper/scooper.tool.xiacy.js"&gt;</script> <script type="text/javascript" src="${contextPath}/js/configure/group-manager.js"&gt;</script>

·····
/@menuConfig

通用弹窗 html :

<div class="jb51code">
<pre class="brush:xhtml;">
<div id = "addNewGroupWin" class = "capsule-win show">
<div class = "capsule-win-top" title = "添加分中心">添加分中心


<div class = "capsule-win-center">
<div class = "capsule-item" id = "oldDevSearch">

required">经度
  <div class = "capsule-item"&gt;
    <div class = "item-left input_<a href="https://www.jb51.cc/tag/required/" target="_blank" class="keywords">required</a>"&gt;纬度</div>
    <div class = "item-right"&gt;
      <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"&gt;
    <div class = "item-left input_<a href="https://www.jb51.cc/tag/required/" target="_blank" class="keywords">required</a>"&gt;描述</div>
    <div class = "item-right"&gt;
      <textarea id = "newGroupDesc" class = "sc_validate" title = "分中心描述" scvalidate='{"required":true,"format":"string"}'></textarea>
    </div>
  </div>         
</div>
<div class = "capsule-win-bottom"&gt;
   <input id="addNewGroupSure" class = "btn-bottom centerfix btn-succ" type="button" value="确定"/&gt;
   <input id="addNewGroupCancle" class = "btn-bottom btn-cancel" type="button" value="取消"/&gt;     
</div>

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

3.子层js

<div class="jb51code">
<pre class="brush:js;">
/**

var addGroupValidator = new Validator();
var contextPath = "/ZJDZYW";

/**

/**

/**

/**

/**

4.父层js

<div class="jb51code">
<pre class="brush: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传递到父页面中再次执行

' + 'BoxLeftSite" src="'+contextPath+'/image/CheckBox.png"/>'+obj.group_name+"("+count+")"+'
  • '; $("#groupCenterArea").append(html); }); clickEventInit(); }); $.ajaxSettings.async = true ; }

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

    6.通用弹窗样式css

    <div class="jb51code">
    <pre class="brush: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;
    }

    最终效果

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    原文链接:https://www.f2er.com/jquery/44795.html
    jQuery弹框

    猜你在找的jQuery相关文章