English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Purpose: In the XXXX project, many popups are implemented using the freemarker web tag appending form, and the web popup only displays the hidden div, which will slow down the speed of the web page preloading and increase the page loading and response time
Solution: Taking the implementation mechanism of the popup for adding a sub-center as an example of centralized management
1Extract the html code and css of the popup page part
html : html/configure/layer-win/_group-add-layer.html
css : css/common/componnentWin.css <Custom popup general style>
child layer 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>
parent layer 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>
Universal popup html :
<div id = "addNewGroupWin" class = "capsule-win show">
<div class = "capsule-win-top" title = "Add Branch Center"><span> Add Branch Center</span></div>
<div class = "capsule-win-center">
<div class = "capsule-item" id = "oldDevSearch">
<div class = "item-left input_required" >Name</div>
<div class = "item-right">
<input id = "newGroupName" class = "sc_validate" title = "Branch Center Name" type="text" placeholder="Please enter the name of the branch center" scvalidate='{"required":true,"format":"string"}'/>
</div>
</div>
<div class = "capsule-item">
<div class = "item-left input_required">Longitude</div>
<div class = "item-right">
<input id = "newGroupLng" class = "sc_validate" title= "Branch Center Longitude" type="text" placeholder="Please enter 0-180's number" scvalidate='{"required":true,"format":"lng"}'/>
</div>
</div>
<div class = "capsule-item">
<div class = "item-left input_required">Latitude</div>
<div class = "item-right">
<input id = "newGroupLat" class = "sc_validate" title = "Branch Center Latitude" type="text" placeholder="Please enter 0-90's number" scvalidate='{"required":true,"format":"lat"}'/>
</div>
</div>
<div class = "capsule-item" id = "processSNOLDIV">
<div class = "item-left input_required">Description</div>
<div class = "item-right">
<textarea id = "newGroupDesc" class = "sc_validate" title = "Branch Center Description" 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="Confirm"/>
<input id="addNewGroupCancle" class = "btn-bottom btn-cancel" type="button" value="Cancel"/>
</div>
</div>
2.both sub and parent layers need to include layer.js
3.sub-layer js
/**
* <Division Center Management>
* Add Division Center
* Author : Yiyuery
* Date : 2016/10/19
*/
;(function($,w,document,undefined){
$(document).ready(function(){
validatorInit();
clickEventBind();
});
var addGroupValidator = new Validator();
var contextPath = "/ZJDZYW";
/**
* form validation initialization
* @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,
});
});
}
/**
* click event binding
* @returns
*/
function clickEventBind(){
addNewGroupClick();
}
/**
* related click events for the division center
* @returns
*/
function addNewGroupClick(){
$("#addNewGroupSure").click(function(){
addNewGroupSure();
});
$("#addNewGroupCancle").click(function(){
addNewGroupCancle();
});
}
/**
* Add a new sub-center [Confirm]
* @returns
*/
function addNewGroupSure() {
validatorInput();
}
/**
* Add sub-center [Cancel]
*/
function addNewGroupCancle() {
closeLayerWin();
}
/**
* Close the currently opened layer popup
*/
function closeLayerWin() {
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index); //Then execute the close
}
/**
* Form submission input validation
*/
function validatorInput() {
/**
* Input validation
*/
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("Sub-center list refreshed!");
}
});
$.ajaxSettings.async = true ;
closeLayerWin();
}
})(jQuery, window, document);
4.Parent layer js
$("#addGroup").click(function() {
layer.config({
path : '${contextPath}/js/lib/layer
});
index = layer.open({
type: 2,
area: ['520px', '400px'],
fix: false, //not fixed
title: '',
maxmin: false,
scrollbar: false,
shade: 0.5,
shadeColse: true,
content:capsule.request.path.groupMan.layer.groupManAddLayerShow,
end:function(){
loadGroupCenterInfo();
}
});
});
loadGroupCenterInfo: The parent layer's js method, called to refresh the sub-center list when the layer popup is closed
5.The parent layer's layer popup cannot jump out of the parent page's nested iframe. Because the operation of adding a sub-center loadGroupCenterInfo is nested, the click event's reactivation clickEventInit method is not global and cannot be passed through end to execute again in the parent page
/**
* Load sub-center
*/
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="[#1#]" class="editGroup"></li></div>';
$("#groupCenterArea").append(html);
});
clickEventInit();
});
$.ajaxSettings.async = true ;
}
Therefore: when the callback function involves mutual calls between functions of the current layer, it is impossible to implement using the general layer outermost popup, and can only be re-modularized and introduced layer in the js of the current page
[Later, it was found that it was actually possible, as long as the callback function is written directly in the calling method. See: method callback in JavaScript and method calling of the parent page Iframe]
layer.config({
path : '${contextPath}/js/lib/layer
});
index = layer.open({
type: 2,
area: ['520px', '400px'],
fix: false, //not fixed
title: '',
maxmin: false,
scrollbar: false,
shade: 0.5,
shadeColse: true,
content:capsule.request.path.groupMan.layer.groupManAddLayerShow,
end:function(){
loadGroupCenterInfo();
}
});
6.common popup window style css
@charset "utf-8";
/*-------functional button------*/
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;
}
/*----------------------------------------- popup button -------------------------------------*/
.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-success {background-color: #1abd9b;}
.btn-warning {background-color: #ec962f;}
/*------------popup window---------------*/
.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;
}
Final effect:
That's all for this article, I hope it will be helpful to everyone's learning, and I also hope that everyone will support the Shouting Tutorial more.
Declaration: The content of this article is from the Internet, the copyright belongs to the original author, the content is contributed and uploaded by Internet users spontaneously, this website does not own the copyright, does not undergo manual editing, and does not assume relevant legal liabilities. If you find any content suspected of copyright infringement, please send an email to: notice#w3Please report violations by email to codebox.com (replace # with @) and provide relevant evidence. Once verified, this site will immediately delete the infringing content.