快捷導(dǎo)航

JS控制彈出懸浮窗口(一覽畫面)的實例代碼

更新時間：2016年05月30日 09:49:03 作者：山中小溪

這篇文章主要介紹了JS控制彈出懸浮窗口(一覽畫面)的實例代碼的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下

在web項目開發(fā)中經(jīng)常遇到在一覽畫面中用戶需要查看某一條記錄的詳細信息。如果用遷移畫面的方式處理，速度會比較慢，而且用戶體驗不是太好。如果采用點擊該條記錄的詳細鏈接時彈出一個層顯示在當(dāng)前畫面的話，處理速度很快，而且用戶感覺也比較新穎。下面我以某個對日電子商務(wù)網(wǎng)站為實例說明下它的實現(xiàn)方式。

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

我的處理時將彈出層放置到整個網(wǎng)站頁面的layout.jsp，網(wǎng)站中所有頁面的布局都繼承它。該網(wǎng)站采用tiles框架統(tǒng)一對頁面布局。

2、計算對象居中要設(shè)置的left值和top值

我把這一步要完成的功能寫成一個js文件，主要是根據(jù)用戶在一覽頁面上鼠標點擊的坐標位置，動態(tài)地顯示該條記錄的層窗口。主要代碼如下：

// 計算對象居中需要設(shè)置的left和top值 
// 參數(shù)： 
// _w - 對象的寬度 
// _h - 對象的高度 
function getLT(_w,_h) 
{ 
var de = document.documentElement; 
// 獲取當(dāng)前瀏覽器窗口的寬度和高度 
// 兼容寫法，可兼容ie,ff 
var w = self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth; 
var h = (de&&de.clientHeight) || document.body.clientHeight; 
// 獲取當(dāng)前滾動條的位置 
// 兼容寫法，可兼容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); 
// 左側(cè)距，頂部距 
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包含到主調(diào)用的一覽jsp文件中。

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

3、一覽jsp中的調(diào)用方法

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

用戶點擊該行記錄的詳情鏈接時調(diào)用顯示層的方法，同時將該記錄的id值傳給調(diào)用方法。其實，每一個層就是用這條記錄的一個id屬性值進行區(qū)分的。

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參數(shù)的作用，還不是太清楚，這點需要再調(diào)查一下。最終效果如下圖，隨著鼠標下移，層能夠動態(tài)的移動。