<!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>点击弹出窗口层，并且背景变暗渐变</title>
<style>
body {font-size:12px;background:#9EC7E7}
img {border:0px}
#msgDiv {
z-index:10001;
400px;
height:387px;
background:#ffeef2;
background-image: url(img/2.jpg);
border:#336699 1px solid;
position:absolute;
left:53%;
top:30%;
font-size:12px;
margin-left:-225px;
display: none;
}
#bgDiv {
display: none;
position: absolute;
top: 0px; //全屏背景
left: 0px;
right:0px;
background-color: #777;
filter:alpha(opacity=50);
-moz-opacity:0.50;
opacity:0.50;
height:100%;
}
</style>
<script type="text/javascript">
//
function showDetail() {
var bgObj=document.getElementById("bgDiv");//背景
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></p>"
}
</script>
</head>
<body>
<div id="msgDiv">
<div id="msgShut" align="right"><br> <a href="#" style="color:#FF9900">关闭</a> </div>
<div id="msgDetail">
<Form id="form1" name="form1" method="post" action="">
<table width="277" height="141" border="0" align="center">
<tr><td width="89" height="26"> </td>
<td width="172"> </td>
</tr>
<tr>
<td width="89" height="27">用户名:</td>
<td width="172"><input type="text" size="15" value="" /></td>
</tr>
<tr>
<td width="89" height="26">密码:</td>
<td width="172"><input type="password" size="15" value="" /></td>
</tr>
<tr>
<td height="15"> </td>
<td> </td>
</tr>
<tr>
<td width="89" height="29">新用户注册</td>
<td width="172"><input type="image" src="img/5.jpg" /></td>
</tr>
</table>
<p> </p>
</form>
</div>
</div>
<div id="bgDiv"></div>
<p> </p>
<p><a href="#" onClick="showDetail()">点击我试试看</a></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>