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判断复选框是否选中及选中个数的实现代码
下一篇:限制复选框最多选择项的实现代码
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程