JS控制弹出悬浮窗口(一览画面)的实例代码
网络编程 2021-07-04 19:59www.168986.cn编程入门
这篇文章主要介绍了JS控制弹出悬浮窗口(一览画面)的实例代码的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
在web项目开发中经常遇到在一览画面中用户需要查看某一条记录的详细信息。如果用迁移画面的方式处理,速度会比较慢,而且用户体验不是太好。如果采用点击该条记录的详细链接时弹出一个层显示在当前画面的话,处理速度很快,而且用户感觉也比较新颖。狼蚁网站SEO优化我以某个对日电子商务网站为实例说明下它的实现方式。
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="" 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值和值
我把这一步要完成的功能写成一个js文件,主要是根据用户在一览页面上鼠标点击的坐标位置,动态地显示该条记录的层窗口。主要代码如下
// 计算对象居中需要设置的left和值 // 参数 // _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 p=0; if(h>_h) p=(st+(h - _h)/2); else p=st; var leftp = 0; if(w>_w) leftp = ((w - _w)/2); // 左侧距,顶部距 return [leftp,p]; } //获取鼠标位置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("",y+15); }
至于方法中event参数的作用,还不是太清楚,这点需要再调查一下。最终效果如下图,随着鼠标下移,层能够动态的移动。
以上所述是长沙网络推广给大家介绍的JS控制弹出悬浮窗口(一览画面)的实例代码,希望对大家有所帮助,如果大家想了解更多资讯请关注狼蚁SEO网站!
上一篇:js判断复选框是否选中及选中个数的实现代码
下一篇:限制复选框最多选择项的实现代码
编程语言
- 宿迁百度关键词排名指南:实现精准营销的关键
- 四川SEO优化怎么做网络推广
- 立昂技术备案老域名收购:如何为您的业务赋能
- 安徽百度关键词seo贵不贵,一般需要多少钱
- 吉林百度快照排名怎么做电话营销
- 多伦新手做SEO怎么做
- 甘肃优化关键词排名推广怎么做论坛营销
- 沙雅SEO网站推广:提升您的在线可见性
- 四川SEO优化如何提升销售额和销售量
- 聂荣网站排名优化:提升网站可见性的全方位指
- 涞水SEO:提升地方企业在线可见性的策略
- 辽宁百度seo排名怎样做网站排名
- 临湘哪有关键词排名优化:提升网站可见度的关
- 黑龙江百度网站优化有没有优惠
- 凉城优化关键词排名推广:提升您的网络可见性
- 萝北整站优化:提升您网站流量和排名的全面指