JS控制彈出懸浮視窗(一覽畫面)的執行個體代碼_javascript技巧

在web項目開發中經常遇到在一覽畫面中使用者需要查看某一條記錄的詳細資料。如果用遷移畫面的方式處理，速度會比較慢，而且使用者體驗不是太好。如果採用點擊該條記錄的詳細連結時彈出一個層顯示在當前畫面的話，處理速度很快，而且使用者感覺也比較新穎。下面我以某個對日電子商務網站為執行個體說明下它的實現方式。

1、jsp頁面上彈出層的代碼

<!-- 物流詳情彈出頁面 start --> <s:iterator value="lrVo" var="lrVo" id="lrVo" status="st"> <div class="logisticscenter_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"><span 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> <!--物流詳情快顯視窗 end--> 

層樣式代碼：

.logisticscenter_xq{ position: absolute; width:710px; border:solid 2px #787878; background: #edfcfe; z-index: 2; } 

我的處理時將彈出層放置到整個網站頁面的layout.jsp，網站中所有頁面的布局都繼承它。該網站採用tiles架構統一對頁面配置。

2、計算對象置中要設定的left值和top值

我把這一步要完成的功能寫成一個js檔案，主要是根據使用者在一覽頁面上滑鼠點擊的座標位置，動態地顯示該條記錄的層視窗。主要代碼如下：

// 計算對象置中需要設定的left和top值 // 參數： // _w - 對象的寬度 // _h - 對象的高度 function getLT(_w,_h) { var de = document.documentElement; // 擷取當前瀏覽器視窗的寬度和高度 // 相容寫法，可相容ie,ff var w = self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth; var h = (de&&de.clientHeight) || document.body.clientHeight; // 擷取當前捲軸的位置 // 相容寫法，可相容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); // 左側距，頂部距 return [leftp,topp]; } //擷取滑鼠位置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 } //判斷瀏覽器類型 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"; } } 

將該js包含到主調用的一覽jsp檔案中。

<script language="javascript" type="text/javascript" src="<s:url value="/js/aligncenter.js"/>"></script> 

3、一覽jsp中的調用方法

<a class="view_button" onclick="viewLogistics(event,'<s:property value="#lrVo.logisticNO"/>')" href="####"><s:text name="struts.webui.logistics.label.view"/></a> 

使用者點擊該行記錄的詳情連結時調用顯示層的方法，同時將該記錄的id值傳給調用方法。其實，每一個層就是用這條記錄的一個id屬性值進行區分的。

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); } 

至於方法中event參數的作用，還不是太清楚，這點需要再調查一下。最終效果如下圖，隨著滑鼠下移，層能夠動態移動。

以上所述是小編給大家介紹的JS控制彈出懸浮視窗(一覽畫面)的執行個體代碼，希望對大家有所協助，如果大家想瞭解更多資訊請關注云棲社區網站！