<!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>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery/jquery_last.js" charset="UTF-8"></script>
<script type="text/javascript">
$(function(){
var mask = $(".mask");
var box = $(".box");
$(".link").click(function(){
mask.show();
box.show();
MaskAdapt();
BoxAdapt();
});
$("#closed").click(function(){
mask.hide();
box.hide();
});
mask.click(function(){
mask.hide();
box.hide();
});
$(window).scroll(function(){
BoxAdapt();
});
$(window).resize(function(){
BoxAdapt();
MaskAdapt();
});
});
function MaskAdapt(){
var docWidth = $(document.body).outerWidth(true);
var docHeight = $(document).height();
$(".mask").height(docHeight).width(docWidth);
};
function BoxAdapt(){
var winWidth = $(window).width();
var winHeight = $(window).height();
var scrHeight = $(document).scrollTop();
var boxHeight = $(".box").height();
var boxWidth = $(".box").width();
var centerWidth = (winWidth-boxWidth)/2
var centerHeight = (winHeight-boxHeight)/2+scrHeight
var offsetHeight = $(".box").offset().top;
if(offsetHeight < centerHeight){
//如果想不要跳动效果,就把前面的animate去掉,最后一个animate中100改为0
$(".box").css("left",centerWidth).stop(true,false).animate({"top":centerHeight*1.1,"left":centerWidth},300).animate({"top":centerHeight*0.95,"left":centerWidth},200).animate({"top":centerHeight,"left":centerWidth},100);
}else{
$(".box").css("left",centerWidth).stop(true,false).animate({"top":centerHeight*0.8,"left":centerWidth},300).animate({"top":centerHeight*1.05,"left":centerWidth},200).animate({"top":centerHeight,"left":centerWidth},100);
};
};
</script>
<style type="text/css">
.mask {position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:0.6;filter:alpha(opacity=60); display:none; z-index:998;}
.box {position:absolute; top:0; left:50%; width:400px; height:200px; background:#993; z-index:999; display:none; padding:20px;}
</style>
<body>
<div style="height:3000px;padding:200px;">
<a class="link" href="javascript:void(0)">Click here</a>
<div class="mask"></div>
<div class="box"><p>I'm dialog box to pop up</p><p>I how so the tragedy, is people pop up</p><p>In fact it, I'll immortals mode</p><input id="closed" type="button" value="close" /></div>
</div>
</body>
</html>