一个简单的DIV弹出屏幕居中并且背景变灰

<! 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" lang ="zh-CN" >
< head >
< title > 点击背景变暗，div弹出框 </ title >
< style >
body { margin : 0 ; padding : 0 ; }
</ style >
< script >
function getPosition() {
var top = document.documentElement.scrollTop;
var left = document.documentElement.scrollLeft;
var height = document.documentElement.clientHeight;
var width = document.documentElement.clientWidth;
return {top:top,left:left,height:height,width:width};
}
function showPop(){
var width = 300 ; // 弹出框的宽度
var height = 160 ; // 弹出框的高度
var obj = document.getElementById( " pop " );

obj.style.display = " block " ;
obj.style.position = " absolute " ;
obj.style.zindex = " 100 " ;
obj.style.width = width + " px " ;
obj.style.height = height + " px " ;

document.getElementById( " sad " ).style.backgroundColor = " #ccc " ; // div层变暗
document.getElementById( " sad " ).style.opacity = " 0.5 " ; // div层透明度为50%，在FF下
// document.getElementById("sad").filters.alpha.opacity="50";//div层透明度为50%，在IE下

var Position = getPosition();
leftadd = (Position.width - width) / 2;
topadd = (Position.height - height) / 2;
obj.style.top = (Position.top + topadd) + " px " ;
obj.style.left = (Position.left + leftadd) + " px " ;

window.onscroll = function (){
var Position = getPosition();
obj.style.top = (Position.top + topadd) + " px " ;
obj.style.left = (Position.left + leftadd) + " px " ;
};
}

function hidePop(){
document.getElementById( " pop " ).style.display = " none " ;
document.getElementById( " sad " ).style.backgroundColor = "" ;
}
</ script >
</ head >
< body >

< div id ="sad" >
< div id ="pop" style ="border:2px solid #ff0000;display:none;background-color:#FC0;" > testtest < br />< br />< br />< br />< a href ="javascript:hidePop();" > hide </ a ></ div >
< br >< br >< br >< br >< br >< br >< br >
< a href ="javascript:showPop();" > show </ a >
< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >
< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >
< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >
< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >< br >
</ div >
</ body >
</ html >

转载于:https://www.cnblogs.com/songxiii/archive/2011/03/09/1978052.html