|
本文现实在web页面点击整页变灰的效果，代码很简单，直接贴代码了,代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>web页面点击整页变灰的效果</title>
</head>
<body style="margin:0;">
<div id="topCoverDiv" style="display:none;float:left;z-index:100;position:absolute;top:expression(this.offsetParent.scrollTop);left:expression(this.offsetParent.scrollLeft);width:100%;height:100%;filter:alpha(opacity=90);background-color:#888888;" oncontextmenu="return false;"><div style="z-index:101;position:absolute;top:200px;left:200px;width:200px;height:200px;background-color:#FFFFFF;"><input type=button value="取消页面灰掉" onclick="disableBodyArea(false);" /></div></div>
<div style="font-size:10pt;">
注1：灰掉页面<br/>
注：本页面仅在dreamwear下测试过。其它浏览器或其它版本未经测试。改进了一下，IE7下可以关闭了，firefox下还有些缺陷，页面超过一屏时，下边没有遮住。可以写脚本实现。<br/>
<hr/>
</div>
<select><option >test</option></select>
<input type=button value="点击将页面灰掉" onclick="disableBodyArea(true);">
<br><br><br><br>
<br><br><br><br>
<select><option >test</option></select>
<br><br><br><br>
<br><br><br><br>
<select><option >test</option></select>
<select><option >test</option></select>
</body>
</html>
<script >
function disableBodyArea(f){
document.getElementById('topCoverDiv').style.display = f? '':'none';
var allSelects=document.getElementsByTagName("select");
for(var i=0;i<allSelects.length;i++) {
allSelects[i].disabled=f;
}
}
</script>
| 
