遮罩: 一个半透明的区域.
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>