JS Control pop-up Suspension window (overview screen) instance Code _javascript tips

In Web project development, you often encounter detailed information about a record that users need to view at the overview screen. If you are dealing with a migration screen, the speed is slow and the user experience is not too good. If you click on the record of the detailed link to pop up a layer displayed in the current screen, processing speed, and users feel more novel. Below I take an e-commerce Web site for example to illustrate how it is implemented.

1, the JSP page pop-up layer of code

<!--Logistics Details pop-up page start--> <s:iterator value= "Lrvo" var= "Lrvo" id= "Lrvo" status= "st" > <div class= "Logistics" Center_xq "style=" Display:none "id= ' <s:property value=" #lrVo. Logisticno "/> ' > <dl> <dt>< Strong><s:text name= "Struts.webui.logistics.label.logisticsDetails"/>:</strong></dt> <dd ><strong class= "Close_wind" >X</strong></dd> </dl> <div class= "Information Logistics_ Win "> <table width=" "border=" 0 "cellspacing=" 0 "cellpadding=" 0 "> <tr> <td class=" R_text "><spa 
n class= "Icon9" >*</span><s:text name= "Struts.webui.logistics.label.logisticsNumber"/>:</td> <td></td> <td colspan= "3" id= "Logisticno" ><s:property value= "#lrVo. Logisticno"/></td > </tr> <tr> <td valign= "Top" class= "R_text" ><span class= "Icon9" >*</span><s:text 
Name= "Struts.webui.logistics.label.distribution"/>:</td><td></td> <td colspan= "3" style= "Text-align:left" id= "content" ><s:property value= "# Lrvo.content "escape=" false "/></td> </tr> </table> </div> </div> </s:iterator&gt 
;  <!--Logistics Details pop-up window end-->

Layer Style Code:

. logisticscenter_xq{ 
Position:absolute; 
width:710px; 
Border:solid 2px #787878; 
Background: #edfcfe; 
Z-index:2; 

My processing will be to put the pop-up layer to the entire site page layout.jsp, the site layout of all the pages to inherit it. The site uses the tiles framework to unify the page layout.

2. The left value and top value to be set for the center of the calculation object

I have this step to complete the function of writing a JS file, mainly based on the user on the list of the mouse click on the location of the coordinates, dynamic display of the layer of the record window. The main code is as follows:

Left and top values to be set for the center of the calculated object//parameter://_w-Object width//_h-Object height function getlt (_w,_h) {var de = Document.documentelemen 
T Gets the width and height//compatibility of the current browser window, compatible ie,ff var w = self.innerwidth | | (de&&de.clientwidth) | | 
Document.body.clientWidth; var h = (De&&de.clientheight) | | 
Document.body.clientHeight; Gets the position//compatibility of the current scroll bar, compatible ie,ff var st= (de&&de.scrolltop) | | 
Document.body.scrollTop; 
var topp=0; 
if (h>_h) topp= (st+ (H-_h)/2); 
else topp=st; 
var leftp = 0; 
if (w>_w) Leftp = ((W-_w)/2); 
Left margin, top distance return [Leftp,topp]; 
//Get mouse position getpostion function getpostion (e) {var x = GetX (e); 
var y = GetY (e); 
} function GetX (e) {e = e | | window.event; return E.pagex | | 
E.clientx + document.body.scrollleft-document.body.clientleft} function GetY (e) {e = e| | window.event; return E.pagey | | 
E.clienty + document.body.scrolltop-document.body.clienttop}//Judge browser type function Getos () {var osobject = ""; if (Navigator.userAgent.indexOf ("MSIE ") >0) {return" MSIE "; 
} if (Isfirefox=navigator.useragent.indexof ("Firefox") >0) {return "Firefox"; 
} if (Issafari=navigator.useragent.indexof ("Safari") >0) {return "Safari"; 
} if (Iscamino=navigator.useragent.indexof ("Camino") >0) {return "Camino"; 
} if (Ismozilla=navigator.useragent.indexof ("gecko/") >0) {return "Gecko";  } 
}

Include the JS in the list JSP file for the main call.

3, the list of JSP in the call method

The method by which the display layer is invoked when the user clicks on the details link of the row record, and passes the ID value of the record to the calling method. In fact, each layer is distinguished by an id attribute value for this record.

function Viewlogistics (event,logisticno) { 
var os = Getos (); 
var y = GetY (event); 
if (os== ' Msie ') { 
y=window.event.y+405; 
} 
$ (". Logisticscenter_xq"). Hide (); 
$ ("#" +logisticno). Show (); 
$ ("#" +logisticno). CSS ("top", y+15); 

As for the role of the event parameters in the method, it is not clear enough, this needs to be investigated again. The final effect is as follows, with the mouse moving down, the layer can move dynamically.

The above is a small set to introduce the JS Control pop-up suspension window (at a glance) of the example code, I hope to help you, if you want to learn more information, please pay attention to cloud Habitat community website!