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


Posted in Javascript onMay 30, 2016

在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控制弹出悬浮窗口(一览画面)的实例代码

以上所述是小编给大家介绍的JS控制弹出悬浮窗口(一览画面)的实例代码,希望对大家有所帮助,如果大家想了解更多资讯请关注三水点靠木网站!

Javascript 相关文章推荐
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
js history对象简单实现返回和前进
Oct 30 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
总结jQuery插件开发中的一些要点
May 16 Javascript
jQuery内容过滤选择器用法示例
Sep 09 Javascript
简单实现Bootstrap标签页
Aug 09 Javascript
详解javascript中对数据格式化的思考
Jan 23 Javascript
Bootstrap 3 进度条的实现
Feb 22 Javascript
深入理解vue-router之keep-alive
Aug 31 Javascript
JavaScript运行原理分析
Feb 09 Javascript
微信小程序开发之转发分享功能
Oct 22 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
Jul 14 Javascript
限制复选框最多选择项的实现代码
May 30 #Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 #Javascript
JS组件Bootstrap Table使用实例分享
May 30 #Javascript
Bootstrap table分页问题汇总
May 30 #Javascript
浅析Javascript中bind()方法的使用与实现
May 30 #Javascript
Bootstrap Paginator分页插件使用方法详解
May 30 #Javascript
深入理解JavaScript中的call、apply、bind方法的区别
May 30 #Javascript
You might like
php selectradio和checkbox默认选择的实现方法详解
2013/06/29 PHP
PHP实现的数独求解问题示例
2017/04/18 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
JQuery jsonp 使用示例代码
2009/08/12 Javascript
js控制div及网页相关属性的代码
2009/12/19 Javascript
jquery dialog键盘事件代码
2010/08/01 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
jquery自定义属性(类型/属性值)
2013/05/21 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
2014/05/04 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
jquery表单验证插件formValidator使用方法
2016/04/01 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
2016/07/27 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
2017/02/11 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
vue数组对象排序的实现代码
2018/06/20 Javascript
React Hooks的深入理解与使用
2018/11/12 Javascript
javascript实现多边形碰撞检测
2020/10/24 Javascript
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
python UNIX_TIMESTAMP时间处理方法分析
2016/04/18 Python
通过python爬虫赚钱的方法
2019/01/29 Python
在CentOS7下安装Python3教程解析
2020/07/09 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
法国奢华女性时尚配饰网上商店:Monnier Frères
2016/08/27 全球购物
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
文明青少年标兵事迹材料
2014/01/28 职场文书
护士见习期自我鉴定
2014/02/08 职场文书
小学毕业感言300字
2014/02/19 职场文书
客服专员岗位职责
2014/02/28 职场文书
2014红色之旅心得体会
2014/10/07 职场文书
医生个人自我剖析材料
2014/10/08 职场文书
高三英语教学计划
2015/01/23 职场文书