<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;
width: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 {
width: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>
posted on 2008-08-29 16:23
liunix 閱讀(653)
評論(0) 編輯 收藏