jquery简单的弹出层浮动层代码

一个简单的jquery弹出框代码实现，点击链接弹出模式对话框，任意点击网页的其它地方可以关闭弹出框，可以自定义透明度，简单实用的jquery弹出框效果。

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

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
2. <html xmlns="http://www.w3.org/1999/xhtml"> 
3. <head> 
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
5. <title>jquery弹出层浮动层代码</title> 
6. <script src="/ajaxjs/jquery1.3.2.js" type="text/javascript"></script> 
7. <style> 
8. *{ margin:0; padding:0} 
9. body{ margin:0; padding:0; font-size:12px} 
10. ul,li{ list-style:none} 
11. ul{position:relative;top:-3px; left:-3px;border:1px solid #ccc; background:#fff;} 
12. li{height:23px;line-height:23px;cursor:default; padding:0 0 0 10px} 
13. li.current{background:#eee} 
14. .wrap{ width:158px; background:#eee; position:absolute;} 
15. </style> 
16. <script type="text/javascript"> 
17. $(function(){ 
18. $(".wrap").hide(); 
19. var objW=$(".wrap").width(); 
20. var objH=$(".wrap").height(); 
21. $(document).mousedown(function(e){ 
22. var selfX=objW+e.pageX; 
23. var selfY=objH+e.pageY 
24. var bodyW=document.documentElement.clientWidth+document.documentElement.scrollLeft; 
25. var bodyH=document.documentElement.clientHeight+document.documentElement.scrollTop; 
26. if(selfX>bodyW && selfY>bodyH){ 
27. $(".wrap").css({top:(bodyH-objH),left:(bodyW-objW)}).show(); 
28. }else if(selfY>bodyH){ 
29. $(".wrap").css({top:(bodyH-objH),left:e.pageX}).show(); 
30. }else if(selfX>bodyW){ 
31. $(".wrap").css({top:e.pageY,left:(bodyW-objW)}).show(); 
32. }else{ 
33. $(".wrap").css({top:e.pageY,left:e.pageX}).show(); 
34. } 
35. }) 
36. $("li").hover(function(){ 
37. $(this).addClass("current"); 
38. },function(){ 
39. $(this).removeClass("current"); 
40. }).click(function(){ 
41. alert($(this).text()) 
42. $(this).parent().parent().hide(); 
43. }) 
44. }) 
45. </script> 
46. </head> 
47. <body> 
48. <div style="height:800px;width:900px"></div> 
49. <div style="position:absolute;top:300px;left:300px"><span style="color:#f00;font-size:28px">请按F5刷新，才能看到效果，</span><br>点击鼠标左键，弹出层，<br>在最右边点击时 
50.  
51.  
52. 层自动往左移</div> 
53. <div class="wrap"> 
54. <ul onmousedown="event.cancelBubble = true"> 
55. <li>连江</li> 
56. <li>宁德</li> 
57. <li>福州</li> 
58. <li>厦门</li> 
59. <li>北京</li> 
60. </ul> 
61. </div> 
62. </body> 
63. </html> 

以上就是本文给大家分享的全部内容了，希望大家能够喜欢。