Div遮罩 Div居中 Div渐隐渐现

最新推荐文章于 2021-11-08 13:35:26 发布

lockelk

最新推荐文章于 2021-11-08 13:35:26 发布

阅读量798

点赞数

分类专栏： web页面文章标签： div function mozilla xhtml safari less

web页面专栏收录该内容

17 篇文章 0 订阅

订阅专栏

直接上代码

<!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="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>