Jquery實現彈窗

window.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>快顯視窗</title> <link type="text/css" rel="stylesheet" href="window.css"> <script language="javascript" type="text/javascript" src="../include/jquery.js"></script> <script language="javascript" type="text/javascript" src="window.js"></script> <script language="javascript">  $(document).ready(function (){   $("#btn_center").click(function (){    $(window).scroll(function (){     popcenterWindow();     });    });   $("#btn_right").click(function (){    $(window).scroll(function (){     poprightWindow();     });    });   $("#btn_left").click(function (){    $(window).scroll(function (){     popleftWindow();    });    });   }); </script> </head> <body> <input type="button" value="彈出置中的視窗" id="btn_center"> <input type="button" value="彈出居右的視窗" id="btn_right"> <input type="button" value="彈出居左的視窗" id="btn_left"> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <div class="window" id="center">  <div class="title"><img src="close.gif">csdn歡迎您</div>  <div class="content">哈哈哈哈哈哈哈</div> </div> <div class="window" id="right">  <div class="title"><img src="close.gif">csdn歡迎您</div>  <div class="content">哈哈哈哈哈哈哈</div> </div> <div class="window" id="left">  <div class="title"><img src="close.gif">csdn歡迎您</div>  <div class="content">哈哈哈哈哈哈哈</div> </div> </body> </html> window.js //視窗的高度 var windowHeight; //視窗的寬度 var windowWidth; //彈窗的高度 var popHeight; //彈窗的寬度 var popWidth; //捲軸滾動的高度 var scrollTop; //捲軸滾動的寬度 var scrollleft; //延時的時間 var timeout; function init(){  //獲得視窗的高度  windowHeight=$(window).height();  //獲得視窗的寬度  windowWidth=$(window).width();  //獲得彈窗的高度  popHeight=$(".window").height();  //獲得彈窗的寬度  popWidht=$(".window").width();  //獲得捲軸的高度  scrollTop=$(window).scrollTop();  //獲得捲軸的寬度  scrollleft=$(window).scrollLeft();   } //定義關閉視窗 function closeWindow(){  $(".title img").click(function (){   $(this).parent().parent().hide("slow");      });    } //定義快顯視窗的方法 function popcenterWindow(){  //先清空上一次的延遲  clearTimeout(timeout);  timeout=setTimeout(function (){  init();  var popY=(windowHeight-popHeight)/2+scrollTop;  var popX=(windowWidth-popWidht)/2+scrollleft;  $("#center").animate({top:popY,left:popX},300).show("slow");},300);  closeWindow(); } function popleftWindow(){  clearTimeout(timeout);  timeout=setTimeout(function (){  init();  var popY=windowHeight+scrollTop-popHeight-10;  var popX=scrollleft-5;  $("#left").animate({top:popY,left:popX},300).show("slow");},300);  closeWindow(); } function poprightWindow(){  clearTimeout(timeout);  timeout=setTimeout(function (){  init();  var popY=windowHeight-popHeight+scrollTop-10;  var popX=windowWidth-popWidht+scrollleft-10;  $("#right").animate({top:popY,left:popX},300).show("slow");},300);  closeWindow(); } window.css /* CSS Document */ .window{  width:250px;  background-color:#3FF;  padding:2px;  margin:5px;  position:absolute;  display:none;  } .content{  height:150px;  background-color:#FFF;  padding:2px;  font-size:14px;  overflow:auto;  } .title{  padding:2px;  color:#999;  font-size:14px;  } .title img{  float:right;  cursor:pointer;  }   .