jQueryポップアップDivウィンドウ中央表示、スクロール追従、閉じるボタン、および数秒後に自動的に消える

3898 ワード

 <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" onclick="javascript:location='http://www.qk12333.com'" 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.8.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>