本文介绍在Web开发中，如何在列表页面通过点击链接动态弹出悬浮窗口显示详细信息。通过JavaScript计算窗口居中位置，结合CSS样式控制布局，实现快速响应的用户体验。文章提供了JSP页面结构、JS定位逻辑及调用方法的完整代码示例，适用于对日电子商务等需要高效交互的场景。
引言与背景
在Web项目开发过程中，经常需要在列表页面查看某条记录的详细信息。如果采用跳转页面的方式，加载速度较慢且用户体验不佳。相比之下，点击列表中的详情链接时，在当前页面弹出一个层来显示信息，不仅处理速度快，而且交互效果更加新颖。以下将以一个对日电子商务网站为例，详细说明其实现方式。
首先，需要在JSP页面中定义弹出层的HTML结构。
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--> 接着，编写控制弹出层显示的CSS样式代码。
弹出层CSS样式定义
.logisticscenter_xq{
position: absolute;
width:710px;
border:solid 2px #787878;
background: #edfcfe;
z-index: 2;
} 在实际处理中，我将弹出层的HTML代码放置在网站通用的layout.jsp文件中，因为该网站采用Tiles框架统一页面布局，所有页面均继承此布局文件。
其次，需要计算弹出窗口居中显示时的left和top值。
我将这一功能封装成一个独立的JS文件，主要功能是根据用户在列表页面点击鼠标时的坐标位置，动态显示对应记录的层窗口。核心代码逻辑如下：
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> 接下来，在一览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控制弹出悬浮窗口(一览画面)的实例代码，希望对大家有所帮助，如果大家想了解更多资讯请关注本站网站！