<html>
<head>
<script>
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
</script>
<style>
body {
height:100%;
margin:0;
padding:0;
}
/*外层全部*/
#overlay{
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
100%;
height:100%;
text-align:center;
z-index: 1000;
background-color:#000;
filter: alpha(opacity=70); /*ie支持的半透明，下面两名为ff支持的*/
-moz-opacity: 0.7;
opacity:.70;
}
/*外层的显示区*/
#overlay div {
300px;
margin: 100px auto;
background-color: #FFFFFF;
border:1px solid #000;
padding:15px;
text-align:center;
}
</style>
</head>
<body id="body">
<div id="overlay">
<div>
用户名：<input type="text" name="" /><br/>
密 码：<input type="text" name="" /><br/>
<input type="button" value="关闭" onclick="overlay()" />
</div>
</div>
<a href='#' onclick='overlay()'>Click here to show the overlay</a>
</body>
</html>