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