运用jquery产生上中下对话框

//html 代码

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>MyHtml.html</title>
 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
 <script  type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
 <link rel="stylesheet"type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css">
  
  
  
   <script src="window.js" type="text/javascript"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
 <style>
 .window{
  width:250px;
  background-color:#d0def0;
  padding: 2px;
  margin: 5px;
  position:absolute;
  display: none;
  
 }
 .title{
  font-size:15px;
  padding: 3px;
  
  
 }
 .title img{
  float: right;
  cursor:pointer;
 }
 .content{
  font-size:15px;
  height: 150px;
  background-color: #fff;
 
  padding: 2px;
 }
  
 </style>
<script type="text/javascript">
//按钮的单击事件
  $(document).ready(function(){
   $("#btm2").click(function(){
    
    
    $(window).scroll(function(){
    
    popCenterWindow(); 
     
    });
     
   });
  
 
  
  
   $("#btm1").click(function(){
    
    $(window).scroll(function(){
     
    popLeftWindow(); 
     
    });
     
   });
  
   $("#btm3").click(function(){
    $(window).scroll(function(){
     popRightWindow();
     
    });
     
   });
  
 

 
});
</script>

  </head>
 
  <body>
   <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><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><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><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>
 
    <input type="button" value="弹出左" id="btm1"/>
    <input type="button" value="弹出中" id="btm2"/>
    <input type="button" value="弹出右" id="btm3"/>
   
    <div id="center" class="window">
     <div class="title">居中csdn欢迎你<img src="images/close.gif"/>    </div>
     <div class="content">csdn呵呵真好<br></div>
  </div>
    <div id="left" class="window">
     <div class="title">csdn欢迎你<img src="images/close.gif"/></div>
     <div class="content">csdn呵呵真好</div>
  </div>
    <div id="right" class="window">
     <div class="title">csdn欢迎你<img src="images/close.gif"/></div>
     <div class="content">csdn呵呵真好</div>
  </div>
  </body>
</html>

 

//窗口的宽度
var windowWidth;
var windowHeight;
var popHeight;
var popWidth;

//获得滚动条的滚动距离
var  scollTop;

//忽的滚动条左右滚动的距离
var scrollLeft;

//定义一个掩饰的时间
var timeout;
 
function init(){
 windowWidth=$(window).width();
 windowHeight=$(window).height();
 
 popWidth=$(".window").width();
 popHeight=$(".window").height();
 scrollTop=$(window).scrollTop();
 scrollLeft=$(window).scrollLeft();
}
 
function popCenterWindow(){
 
 
 clearTimeout(timeout);
 
 timeout=setTimeout(function (){
   //进行参数的初始化
 init();
 
 //弹出窗口的x坐标
  var popx=(windowWidth-popWidth)/2+scrollLeft;
  //弹出窗口的y坐标
  var popy=(windowHeight-popHeight)/2+scrollTop;
  //让弹窗显示到我们设定的位置
   //让弹窗显示到我们设定的位置
   $("#center").animate({left:popx,top:popy},100).show("slow");
 closeWindow();
 
 
 },300);
 
 
 
 
 

}

function popLeftWindow(){
 
 
 clearTimeout(timeout);
 
 timeout=setTimeout(function (){
  init();
 var popx=scrollLeft;
   //弹出窗口的y坐标
   var popy=(windowHeight-popHeight)+scrollTop-100;
   //让弹窗显示到我们设定的位置
   $("#left").animate({left:popx,top:popy},100).show("slow");
 closeWindow();
 
 
 },300);
 
 
 
}
function popRightWindow(){
 clearTimeout(timeout);
 
 timeout=setTimeout(function (){
  init();
 var popx=windowWidth-popWidth+scrollLeft-10;
   //弹出窗口的y坐标
   var popy=windowHeight-popHeight+scrollTop-10;
   //让弹窗显示到我们设定的位置
  // $("#right").css("left",popx).css("top",popy).show("slow");
  
   $("#right").animate({left:popx,top:popy},100).show("slow");
 closeWindow();
 
 
 },300);
 

}

 

 

 

function closeWindow(){
 //找到X图片
 $(".title img").click(function(){
  // --title--div
  $(this).parent().parent().hide("slow");
 
 });

}