<!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>
<title>弹出层测试</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<script>
var timeid;//定时执行的对象
var hiddHeight=30;//弹出层上升距离
var whileNum=10;//循环次数
var isOpen=true;//出现，false隐藏
function b$(o){return document.getElementById(o)}
/*关层*/function closeMes(){b$("messMask").style.display="none";b$("messMain").style.display="none";window.clearTimeout(timeid)}
/*开层*/function openMes(){
window.clearTimeout(timeid);
var o1=b$("messMask"),o2=b$("messMain"),d=document,dd=d.documentElement,db=d.body,o=b$('messV'),os1=o1.style,os2=o2.style;
os1.display=os2.display="block";
var tp=dd.scrollTop>db.scrollTop?dd.scrollTop:db.scrollTop;
var dH=db.scrollHeight>dd.scrollHeight?db.scrollHeight:dd.scrollHeight;
os1.height=dH+"px";
var t=(tp+dd.clientHeight/2-o2.offsetHeight/2)+hiddHeight;
os2.top=t+"px";
os2.left=(db.scrollLeft+dd.clientWidth/2-o2.offsetWidth/2)+"px";
o.innerHTML="<div align='center' style='height:100px;'><img style='margin-top:80px;' src='/vbar/images/ajaxImg.gif'/></div>";
t1=t;t2=whileNum;isOpen=true;moveDiv();
return o}
/*移动层*/function moveDiv(){
var os=b$("messMain").style;
if(isOpen){t2--;if(t2<0){timeid=window.setTimeout("moveDiv()","1500");isOpen=false;return}}else{t2++;if(t2>=whileNum){closeMes();return}}
t1-=hiddHeight/whileNum;os.top=t1+"px";os.filter="alpha(opacity="+(100-t2*(100/whileNum))+")";os.opacity=(100-t2*(100/whileNum))/100;
timeid=window.setTimeout("moveDiv()","10")}
</script>
<style>
#messMask{display:none;position:absolute;z-index:1;width:100%;height:100%;top:0px;left:0px;background-color:#eee;opacity:0.50;color:#333;
filter:alpha(opacity=50);}
#messMain{display:none;position:absolute;z-index:9999;width:300px;height:200px;background-color:#FFF;border:1px solid #606060;padding:5px;color:#333;font-size:12px;filter:alpha(opacity=10);}
</style>
</head>
<body>
<div id="messMask"></div>
<div id="messMain">
<span style="width:100%;height:20px;text-align:right;cursor:pointer;display:block;font-size:12px;color:#333333;" onclick="closeMes();">关闭</span>
<span id="messV"></span>
</div>
<input type="button" value="点击弹出" onclick="openMes();"/>
</body>
</html>