JS控制弹出悬浮窗口(一览画面)的实例代码

Pearl ·

更新时间:2024-11-15

· 815 次阅读

在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参数的作用，还不是太清楚，这点需要再调查一下。最终效果如下图，随着鼠标下移，层能够动态的移动。