首页 > 代码库 > jQuery弹出窗口完整代码

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 <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="http://www.mamicode.com/居中窗口" id="btn_center" />  52 <input type="button" value="http://www.mamicode.com/居左下角" id="btn_left" />  53 <input type="button" value="http://www.mamicode.com/居右下角" 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>

效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm

jQuery弹出窗口完整代码