遮罩: 一個半透明的區域.
1. 定位：使用fixed: 不會隨著滾動條的滾動而滾動，例如定位一個東西在屏幕最下方很有用。
使用absolute: 會隨著滾動條的滾動而滾動，如果是一個圖片，填表框時用這個很好.
2. element設置屬性: element.setAttribute("id", "shadow");
element.setAttribute("class", "shadow");
3. 取得當前窗口左上角的位置: var y = window.pageXOffset;
4. 設置遮罩左上角的位置: element.style.left = 0; element.style.top = y;
簡單例子:
<html>
<head>
<style type="text/css">
#shadow {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
background-color: green;
opacity: 0.3;
visibility: hidden;
}
</style>
<script type="text/javascript">
function foo() {
var y = window.pageYOffset;
//var d = document.createElement("div");
var d = document.getElementById("shadow");
d.setAttribute("id", "shadow");
//d.setAttribute("class", "shadow");
d.style.left = 0;
d.style.top = y;
d.style.visibility = "visible";
//document.appendChild(d);
}
</script>
</head>
<body>
<div id="shadow"></div>
<table>
<tr>
<td><input type="button" value="Button" id="btn" onclick="foo()"></td>
<td><br><textarea rows="100" cols="100"></textarea></td>
</tr>
</table>
</body>
</html>