jQuery弹出Div窗口居中显示、滚动跟随、关闭按钮以及几秒后自动消失

要实现一个弹出窗口，在弹出窗口中进行操作，例如帐号的注册，或者用户登录，需要弹出一个窗口。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 <DIV id="closeLayer"  onClick="closeMe()"><IMG src="jiuye/close.gif" width="15" height="13"></DIV>  
  <div id ="jiuye"><img src="jiuye/jiuye1.jpg" id="jiuyeImage" style="cursor:hand"/></div>  
  <style type="text/css">  
  #jiuye{  
      position:absolute;  
      left:16px;  
      top:129px;  
      width:600px;  
      height:540px;  
      z-index:1;  
        
  }  
  #closeLayer{  
      position:absolute;      
      left:580px;     
      top:143px;      
      width:24px;     
      height:19px;  
      z-index:2;  
  }  
  </style>  
<script src="jiuye/jquery-1.7.0.js" type="text/javascript"></script>  
<script type="text/javascript">  
    
function closeMe(){  
    document.getElementById("closeLayer").style.display="none";  
    document.getElementById("jiuye").style.display="none";  
    $(window).unbind();  
}  
  // 居中  
function center() {  
    var obj=$("#jiuye");  
    var closeObj=$("#closeLayer");  
    var screenWidth = $(window).width(), screenHeight = $(window).height(); //当前浏览器窗口的 宽高  
    var scrolltop = $(document).scrollTop();//获取当前窗口距离页面顶部高度  
    var objLeft = (screenWidth - obj.width())/2 ;  
    var objTop = (screenHeight - obj.height())/2 + scrolltop;  
    obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'});  
      
    var closeObjLeft = (screenWidth + obj.width())/2-closeObj.width()-2 ;  
    var closeObjTop = (screenHeight - obj.height())/2 + scrolltop+12;  
    closeObj.css({left: closeObjLeft + 'px', top: closeObjTop + 'px','display': 'block'});  
    //浏览器窗口大小改变时  
    $(window).resize(function() {  
    screenWidth = $(window).width();  
    screenHeight = $(window).height();  
    scrolltop = $(document).scrollTop();  
    objLeft = (screenWidth - obj.width())/2 ;  
    objTop = (screenHeight - obj.height())/2 + scrolltop;  
    obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'});  
    var closeObjLeft = (screenWidth + obj.width())/2-closeObj.width()-2 ;  
    var closeObjTop = (screenHeight - obj.height())/2 + scrolltop+12;  
    closeObj.css({left: closeObjLeft + 'px', top: closeObjTop + 'px','display': 'block'});  
    });  
    //浏览器有滚动条时的操作、  
    $(window).scroll(function() {  
    screenWidth = $(window).width();  
    screenHeight = $(window).height();  
    scrolltop = $(document).scrollTop();  
    objLeft = (screenWidth - obj.width())/2 ;  
    objTop = (screenHeight - obj.height())/2 + scrolltop;  
    obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'});  
    var closeObjLeft = (screenWidth + obj.width())/2-closeObj.width()-2 ;  
    var closeObjTop = (screenHeight - obj.height())/2 + scrolltop+12;  
    closeObj.css({left: closeObjLeft + 'px', top: closeObjTop + 'px','display': 'block'});  
    });  
}   
center();  
$('#closeLayer').show(300).delay(3000).fadeOut("slow");  
$('#jiuye').show(300).delay(3000).fadeOut("slow",function(){     
   //隐藏时把元素删除     
  $(window).unbind();  
});     
</script>