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 相关文章推荐
JavaScript获取图片真实大小代码实例
Sep 24 Javascript
jQuery中insertBefore()方法用法实例
Jan 08 Javascript
jQuery中wrapInner()方法用法实例
Jan 16 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
Dec 29 Javascript
js判断主流浏览器类型和版本号的简单实现代码
May 26 Javascript
Vue实现双向绑定的方法
Dec 22 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
Jun 13 Javascript
Vue 中的compile操作方法
Feb 26 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
Apr 20 Javascript
vuex与组件联合使用的方法
May 10 Javascript
通过js示例讲解时间复杂度与空间复杂度
Aug 06 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 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 curl 或 file_get_contents 获取需要授权页面的方法
2017/05/05 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
jQuery DOM操作小结与实例
2010/01/07 Javascript
Jquery 扩展方法
2010/05/06 Javascript
使用jquery插件实现图片延迟加载技术详细说明
2011/03/12 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
javascript学习笔记(六)数据类型和JSON格式
2014/10/08 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
七个不允许错过的jQuery小技巧
2015/12/21 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
2016/04/21 Javascript
jquery点击展示与隐藏更多内容
2016/12/03 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
AngularJS改变元素显示状态
2017/04/20 Javascript
AngularJs定时器$interval 和 $timeout详解
2017/05/25 Javascript
基于Vue实现页面切换左右滑动效果
2020/06/29 Javascript
解决vue 引入子组件报错的问题
2018/09/06 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
2020/07/01 Javascript
Fiddler如何抓取手机APP数据包
2016/01/22 Python
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
python将回车作为输入内容的实例
2018/06/23 Python
python利用itertools生成密码字典并多线程撞库破解rar密码
2019/08/12 Python
Python列表推导式实现代码实例
2020/09/09 Python
莫斯科大型旅游休闲商品超市:Camping.ru
2020/09/16 全球购物
linux面试题参考答案(6)
2016/06/23 面试题
销售工作人员的自我评价分享
2013/11/10 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
未婚证明书模板
2014/10/08 职场文书
教师工作总结范文2014
2014/11/10 职场文书
家长高考寄语
2015/02/27 职场文书
中英文求职信范文
2015/03/19 职场文书
七夕情人节问候语
2015/11/11 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书
MySQL定时备份数据库(全库备份)的实现
2021/09/25 MySQL
Oracle数据库事务的开启与结束详解
2022/06/25 Oracle