In web project development, we often encounter users who need to view the detailed information of a certain record in the list screen. If you use the method of migrating the screen, the speed will be slower and the user experience will not be very good. If a layer pops up when clicking on the detailed link of the record and displays it on the current screen, the processing speed is very fast and the user feels that it is relatively novel. Below I will use a certain e-commerce website to illustrate its implementation method as an example.
1. The code that pops up the layer on the jsp page
<!-- Logistics Details pop-up page start --> <s:iterator value="lrVo" var="lrVo" id="lrVo" status="st"> <div style="display: none;" id='<s:property value="#lrVo.logisticNO"/>'> <dl> <dt><strong><s:text name="struts.webui.logistics.label.logisticsDetails"/>:</strong></dt> <dd><strong>X</strong></dd> </dl> <div> <table cellpacing="0" cellpadding="0"> <tr> <td><span>*</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"><span>*</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> <!--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 puts the popup layer to layout.jsp on the entire website page, and the layout of all pages in the website inherits it. The website adopts the tiles framework to unify the page layout.
2. Calculate the left and top values to be set in the center of the object
I wrote the function to complete in this step into a js file, which mainly displays the layer window of the record dynamically based on the coordinate position of the user's mouse click on the list page. The main code is as follows:
// Calculate the left and top values that need to be set in the center of the object// Parameters: // _w - object width// _h - object height function getLT(_w,_h) { var de = document.documentElement; // Get the width and height of the current browser window// Compatible writing method, compatible with ie,ff var w = self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth; var h = (de&&de.clientHeight) || document.body.clientHeight; // Get the position of the current scrollbar// Compatible writing method, compatible with 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 distance, 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(isCamine=navigator.userAgent.indexOf("Camine")>0){ return "Camine"; } if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){ return "Gecko"; } }Include this js into the list jsp file of the main call.
<script language="javascript" type="text/javascript" src="<s:url value="/js/aligncenter.js"/>"></script>
3. A brief look at the calling methods in jsp
<a onclick="viewLogistics(event,'<s:property value="#lrVo.logisticNO"/>')" href="####"><s:text name="struts.webui.logistics.label.view"/></a>
When the user clicks on the details link of the record of the row, the method of the display layer is called, and the id value of the record is passed to the calling method. In fact, each layer is distinguished by an id attribute value of 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 event parameters in the method, it is not very clear, and this needs to be investigated again. The final effect is as shown in the figure below. As the mouse moves down, the layer can move dynamically.
The above is the example code of the JS control pop-up floating window (list screen) introduced to you by the editor. I hope it will be helpful to you. If you want to know more information, please follow the Wulin.com website!