效果体验：http://keleyi.com/keleyi/phtml/jqtexiao/1.htm
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 <meta name="keywords" content="www.cnblogs.com/jihua"/> 7 <style type="text/css"> 8 .window{ 9 width:250px; 10 background-color:#d0def0; 11 position:absolute; 12 padding:2px; 13 margin:5px; 14 display:none; 15 } 16 .content{ 17 height:150px; 18 background-color:#FFF; 19 font-size:14px; 20 overflow:auto; 21 } 22 .title{ 23 padding:2px; 24 color:#0CF; 25 font-size:14px; 26 } 27 .title img{ 28 float:right; 29 } 30 </style> 31 <script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.7.2.min.js"></script> 32 <script type="text/javascript" language="javascript"> 33 $(document).ready(function () { 34 $("#btn_center").click(function () { 35 popCenterWindow(); 36 }); 37 38 $("#btn_right").click(function () { 39 popRightWindow(); 40 }); 41 $("#btn_left").click(function () { 42 popLeftWindow(); 43 }); 44 45 }); 46 47 </script> 48 </head> 49 <body> 50 <div style="width:600px;margin-left:auto;margin-right:auto;margin-top:160px;"> 51 <input type="button" value="居中窗口" id="btn_center" /> 52 <input type="button" value="居左下角" id="btn_left" /> 53 <input type="button" value="居右下角" id="btn_right" /> 54 </div> 55 <div class="window" id="center"> 56 <div id="title" class="title"><img src="http://pic002.cnblogs.com/images/2012/451207/2012100814082487.jpg" alt="关闭" />计划 博客园-居中窗口</div> 57 <div class="content">jihua.cnblogs.com</div> 58 </div> 59 60 <div class="window" id="left"> 61 <div id="title2" class="title"><img src="http://pic002.cnblogs.com/images/2012/451207/2012100814082487.jpg" alt="关闭" />计划 博客园-居左窗口</div> 62 <div class="content">jihua.cnblogs.com</div> 63 </div> 64 <div class="window" id="right"> 65 <div id="title3" class="title"><img src="http://pic002.cnblogs.com/images/2012/451207/2012100814082487.jpg" alt="关闭" />计划 博客园-居右窗口</div> 66 <div class="content">jihua.cnblogs.com</div> 67 </div> 68 <script type="text/javascript"> 69 //获取窗口的高度 70 var windowHeight; 71 //获取窗口的宽度 72 var windowWidth; 73 //获取弹窗的宽度 74 var popWidth; 75 //获取弹窗高度 76 var popHeight; 77 function init(){ 78 windowHeight=$(window).height(); 79 windowWidth=$(window).width(); 80 popHeight=$(".window").height(); 81 popWidth=$(".window").width(); 82 } 83 //关闭窗口的方法 84 function closeWindow(){ 85 $(".title img").click(function(){ 86 $(this).parent().parent().hide("slow"); 87 }); 88 } 89 //定义弹出居中窗口的方法 90 function popCenterWindow(){ 91 init(); 92 //计算弹出窗口的左上角Y的偏移量 93 var popY=(windowHeight-popHeight)/2; 94 var popX=(windowWidth-popWidth)/2; 95 //alert('jihua.cnblogs.com'); 96 //设定窗口的位置 97 $("#center").css("top",popY).css("left",popX).slideToggle("slow"); 98 closeWindow(); 99 } 100 function popLeftWindow(){ 101 init(); 102 //计算弹出窗口的左上角Y的偏移量 103 var popY=windowHeight-popHeight; 104 //var popX=-(windowWidth-popWidth); 105 //alert(popY); 106 //设定窗口的位置 107 $("#left").css("top",popY-50).css("left",50).slideToggle("slow"); 108 closeWindow(); 109 } 110 function popRightWindow(){ 111 init(); 112 //计算弹出窗口的左上角Y的偏移量 113 var popY=windowHeight-popHeight; 114 var popX=windowWidth-popWidth; 115 //alert(www.cnblogs.com/jihua); 116 //设定窗口的位置 117 $("#right").css("top",popY-50).css("left",popX-50).slideToggle("slow"); 118 closeWindow(); 119 } </script> 120 </body> 121 </html>
web前端汇总 :http://www.cnblogs.com/jihua/p/webfront.html
