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>