jquery实现可自动判断位置的弹出层效果代码

本文实例讲述了jquery实现可自动判断位置的弹出层效果代码。分享给大家供大家参考。具体如下：

这是一款jquery实现的智能弹出层效果，位置可以自适应，当层靠右边显示时自动往左移。初次运行时请按F5刷新，载入远程jQuery后才能看到效果，点击鼠标左键，弹出层将出现，在最右边点击时层自动往左移。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-自动检查-pos-alert-DLG-演示/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titlejquery弹出层浮动层代码/title脚本src=' http : jquery 1。3 .2 .js ' type=' text/JavaScript '/script style * { margin :0；划水：0 }车身{边际：0划水：0;font-size:12px}ul，Li { list-style : none } ul { position : relative；top :-3px；左：-3px；border:1px固体# ccc背景# fff} li { height:23px线高：23 pxcursor : defaultpadd :0 0 10px } Li。当前{背景： # eee } .包装{宽度：158像素背景技术# eee位置：绝对；}/style脚本类型=' text/JavaScript ' $(function(){ $(').换行')。hide()；var objW=$(' .换行')。宽度();var objH=$(' .换行')。高度();$(文档)。鼠标向下(函数{ var SelfX=ObJw e . PageXvar SelfY=ObJh e . pagey var body w=document。文档元素。客户端宽度文档。文档元素。向左滚动；var body h=文档。文档元素。客户端高度文档。文档元素。滚动顶部；if(selfXbodyW selfYbodyH){ $(' .换行')。CSS({顶部：(BodH-ObJh)，左侧：(BodW-ObJw)}).show()；}else if(selfYbodyH){ $(' .换行')。CSS({ top :(BodH-ObJh)，left:e.pageX}).show()；}else if(selfXbodyW){ $(' .换行')。css({top:e.pageY，left :(BodW-ObJw)}).show()；}else{ $(' .换行')。css({top:e.pageY，left:e.pageX}).show()；} }) $('li ').悬停(function(){ $(this)).添加CLaSS(' current ')；}，function(){ $(this).removeClass(“”当前');}).单击(函数(){ alert($(this)).text()) $(this).父项()。父项()。hide()；})})/脚本/头dydiv style=' height :800 px宽度：900 px '/div div style='位置：绝对值；top :300 pxleft :300 px ' span style=' color : # f00；'' font-size:28px '请按F5刷新，才能看到效果，/spanbr点击鼠标左键，弹出层，br在最右边点击时层自动往左移/div div class=' wrap ' ul on mouse down='事件。“可取消=真”李连江/li li宁德/li li福州/li li厦门/li li北京/li /ul/div/body/html希望本文所述对大家的jQuery程序设计有所帮助。