<!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>
<style type="text/css">
* { margin:0px;
padding:0px;}
#cover{position:absolute;top:0;left:0;z-index:100;visibility:hidden;background:#666;}
.shadow{position:absolute;top:0;left:0;z-index:200;visibility:hidden;}
#a_open,a_close{cursor:hand;cursor:pointer; color:red;}
</style>
</head>
<body>
<div id="cover" onClick="DecOpacity();"></div>
<a id="a_open" href="#" onClick="show('cover','contBox');return false;">来点我</a>
<div id="contBox" class="box shadow" style="background:#FFF; width:400px; height:200px; padding:12px 9px;">
这里是内容 <a id="a_close" href="#" onClick="DecOpacity();return false;">关闭</a>
</div>
</body>
</html>
<script type="text/javascript">
function getPageSize(){
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = window.innerWidth + window.scrollMaxX;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
// console.log(self.innerWidth);
// console.log(document.documentElement.clientWidth);
if (self.innerHeight) { // all except Explorer
if(document.documentElement.clientWidth){
windowWidth = document.documentElement.clientWidth;
} else {
windowWidth = self.innerWidth;
}
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
// console.log("xScroll " + xScroll)
// console.log("windowWidth " + windowWidth)
// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){
pageWidth = xScroll;
} else {
pageWidth = windowWidth;
}
// console.log("pageWidth " + pageWidth)
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
return arrayPageSize;
}
var pageS=new Array();
pageS=getPageSize();
var contBox=document.getElementById("contBox");
var cover=document.getElementById("cover");
var tmpAlpha=0.0;
var tmpAlphaN=0.5;
function show(cover,id){
var objCover=document.getElementById(cover);
var objId=document.getElementById(id);
var scrollW = pageS[2];
var scrollH = pageS[3];
var T=(scrollH-objId.offsetHeight)/2+document.body.scrollTop||document.documentElement.scrollTop;
var L=(scrollW-objId.offsetWidth)/2+document.body.scrollLeft||document.documentElement.scrollLeft;
objCover.style.width = scrollW+"px";
objCover.style.height= scrollH+"px";
objCover.style.visibility="visible";
objId.style.visibility="visible";
objId.style.top=T+"px";
objId.style.left=L+"px";
AddOpacity();
}
function hide(cover,id){
var objCover=document.getElementById(cover);
var objId=document.getElementById(id);
objCover.style.visibility="hidden";
objId.style.visibility="hidden";
}
function AddOpacity(){
contBox.style.opacity=tmpAlpha;
contBox.style.filter="alpha(opacity="+tmpAlpha*100+")";
cover.style.opacity=tmpAlpha;
cover.style.filter="alpha(opacity="+tmpAlpha*60+")";
tmpAlpha+=0.05;
if(tmpAlpha>=0.5){
cover.style.opacity = 0.5;
}
if(tmpAlpha>=1){
contBox.style.opacity = 1;
return;}else{
setTimeout("AddOpacity()",20);}
}
function DecOpacity(){
contBox.style.opacity=tmpAlphaN;
contBox.style.filter="alpha(opacity="+tmpAlphaN*100+")";
cover.style.opacity=tmpAlphaN;
cover.style.filter="alpha(opacity="+tmpAlphaN*60+")";
tmpAlphaN-=0.05;
if(tmpAlphaN<=0){
contBox.style.opacity = 0;
contBox.style.visibility="hidden";
cover.style.visibility="hidden";
tmpAlpha=0.0;
tmpAlphaN=0.5;
//clearTimeout()
return;}else{
setTimeout("DecOpacity()",20);}
}
</script>
