<html>
<head>
<style type="text/css">
</style>
</head>
<body>
//背景层（大小与窗口有效区域相同，即当弹出对话框时，背景显示为放射状透明灰色） //背景层（大小与窗口有效区域相同，即当弹出对话框时，背景显示为放射状透明灰色） //背景层（大小与窗口有效区域相同，即当弹出对话框时，背景显示为放射状透明灰色） //背景层（大小与窗口有效区域相同，即当弹出对话框时，背景显示为放射状透明灰色） //背景层（大小与窗口有效区域相同，即当弹出对话框时，背景显示为放射状透明灰色） //背景层（大小与窗口有效区域相同，即当弹出对话框时，背景显示为放射状透明灰色）
<input type="button" value="点击这里" onclick="sAlert()" />
<script type="text/javascript" language="javascript">
function sAlert(){
var msgw,msgh,bordercolor
msgw=250//提示窗口的宽度
msgh=100//提示窗口的高度
bordercolor="#336699"//提示窗口的边框颜色
titlecolor="#99CCFF"//提示窗口的标题颜色
//背景层（大小与窗口有效区域相同，即当弹出对话框时，背景显示为放射状透明灰色）
var bgObj=document.createElement("div")//创建一个div对象（背景层）
//定义div属性
bgObj.setAttribute("id","bgDiv")
bgObj.style.position="absolute"
bgObj.style.top="0"
bgObj.style.background="#777"
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75"
bgObj.style.opacity="0.6"
bgObj.style.left="15%"
bgObj.style.width="85%"
bgObj.style.height="100%"
bgObj.style.zIndex = "10000"
document.body.appendChild(bgObj)//在body内添加该div对象
var msgObj=document.createElement("div")//创建一个div对象（提示框层）
//定义div属性，即相当于
msgObj.setAttribute("id","msgDiv")
msgObj.setAttribute("align","center")
msgObj.style.background="white"
msgObj.style.border="1px solid " + bordercolor
msgObj.style.position = "absolute"
msgObj.style.left = "65%"
msgObj.style.top = "50%"
msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif"
msgObj.style.marginLeft = "-225px"
msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px"
msgObj.style.width = msgw + "px"
msgObj.style.height =msgh + "px"
msgObj.style.textAlign = "center"
msgObj.style.lineHeight ="25px"
msgObj.style.zIndex = "10001"
var title=document.createElement("h4")//创建一个h4对象（提示框标题栏）
//定义h4的属性，即相当于
//<h4 id="msgTitle" align="right" style="margin:0 padding:3px background-color:#336699 filter:progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100) opacity:0.75 border:1px solid #336699 height:18px font:12px Verdana,Geneva,Arial,Helvetica,sans-serif color:white cursor:pointer" onclick="">关闭 </h4>
title.setAttribute("id","msgTitle")
title.setAttribute("align","right")
title.style.margin="0"
title.style.padding="3px"
title.style.background=bordercolor
title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100)"
title.style.opacity="0.7"
title.style.border="1px solid " + bordercolor
title.style.height="12px"
title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif"
title.style.color="white"
title.style.cursor="pointer"
title.innerHTML="关闭"
title.onclick=removeObj
function removeObj(){//点击标题栏触发的事件
document.body.removeChild(bgObj)//删除背景层Div
document.getElementById("msgDiv").removeChild(title)//删除提示框的标题栏
document.body.removeChild(msgObj)//删除提示框层
}
document.body.appendChild(msgObj)//在body内添加提示框div对象msgObj
document.getElementById("msgDiv").appendChild(title)//在提示框div中添加标题栏对象title
var txt=document.createElement("p")//创建一个p对象（提示框提示信息）
txt.style.margin="1em 0"
txt.setAttribute("id","msgTxt")
txt.innerHTML='key:<input type="test" name="psd" /><br><input type ="button" value = "send" onclick= removeObj() >'
document.getElementById("msgDiv").appendChild(txt)//在提示框div中添加提示信息对象txt
}
</script>
</body>
</html>
jQuery Lightbox Plugin 这个jq的框架就是这么的效果。。。你看一下。http://www.qianduan.net/top-10-jquery-lightbox-scripts.html
这种就是点击弹出窗口，可以关闭，背景变暗，你所说的这几个需求都满足了。
补充：
还有这段代码。你试一下吧。
<!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>
<!-- meta data -->
<meta http-equiv="Content-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<meta name="robots" content="all" />
<meta name="author" content="在远方@www.jscode.cn" />
<meta name="Copyright" content="Copyright (c) jscode.cn" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" media="screen" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" media="screen" />
<meta name="description" content="网页特效观止" />
<meta name="keywords" content="网页特效,网页特效代码" />
<!-- site title -->
<title>点击弹出窗口层，并且背景变暗渐变---网页特效观止|www.jscode.cn|网页特效代码</title>
<style>
body {font-size:12pxbackground:#9EC7E7}
img {border:0px}
#msgDiv {
z-index:10001
width:500px
height:400px
background:white
border:#336699 1px solid
position:absolute
left:50%
top:20%
font-size:12px
margin-left:-225px
display: none
}
#bgDiv {
display: none
position: absolute
top: 0px
left: 0px
right:0px
background-color: #777
filter:progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)
opacity: 0.6
}
</style>
<script type="text/javascript">
function showDetail() { //在远方www.jscode.cn
//背景
var bgObj=document.getElementById("bgDiv")
bgObj.style.width = document.body.offsetWidth + "px"
bgObj.style.height = screen.height + "px"
//定义窗口
var msgObj=document.getElementById("msgDiv")
msgObj.style.marginTop = -75 + document.documentElement.scrollTop + "px"
//关闭
document.getElementById("msgShut").onclick = function(){
bgObj.style.display = msgObj.style.display = "none"
}
msgObj.style.display = bgObj.style.display = "block"
msgDetail.innerHTML="<p align=center>小窗口里的内容</p><p align=center><A href=http://www.jscode.cn><FONT color=#0000ff>网页特效观止</FONT></A></p>"
}
</script>
</head>
<body>
<div id="msgDiv">
<div id="msgShut">
关闭</div>
<div id="msgDetail">
</div>
</div>
<div id="bgDiv">
</div>
<p> </p>
<p><a href="#" onClick="showDetail()">点击我试试看</a></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>更多网页特效代码尽在 <a href="http://www.jscode.cn/">网页特效观止</a></p>
</body>
</html>
使用css创建：将这个需要覆盖全部页面的半透明容器相对与文档绝对定位，然后设置其宽度高度均为均为100%即可，缺点是容器总是覆盖当前状态下浏览器视口的面积，如果此时调整浏览器宽度或高度为更大值则出现非覆盖区。
JavaScript创建：
先用css进行透明层定位，同上.然后使用bom语句获取当前视口的宽度和高度然后将获取的值分别付给半透明容器的宽度和高度，并创建一个onresize事件函数，一旦用户改变浏览器窗口大小则从新读取这些值，这样即可保证任何情况下均能完全覆盖
