JS控制弹出悬浮窗⼝（⼀览画⾯）的实例代码
在web项⽬开发中经常遇到在⼀览画⾯中⽤户需要查看某⼀条记录的详细信息。如果⽤迁移画⾯的⽅式处理，速度会⽐较慢，⽽且⽤户体验不是太好。如果采⽤点击该条记录的详细链接时弹出⼀个层显⽰在当前画⾯的话，处理速度很快，⽽且⽤户感觉也⽐较新颖。下⾯我以某个对⽇电⼦商务⽹站为实例说明下它的实现⽅式。
1、jsp页⾯上弹出层的代码
<!-- 物流详情弹出页⾯ start -->
<s:iterator value="lrVo" var="lrVo" id="lrVo" status="st">
<div class="logisticscenter_xq" 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" id="content"><s:property value="#t" escape="false"/></td>
</tr>
</table>
</div>
</div>
</s:iterator>
<!--物流详情弹出窗⼝ end-->
层样式代码：
.logisticscenter_xq{
position: absolute;
width:710px;
border:solid 2px #787878;
background: #edfcfe;
js控制滚动条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控制弹出悬浮窗⼝(⼀览画⾯)的实例代码，希望对⼤家有所帮助，如果⼤家想了解更多资讯请关注⽹站！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。