web页面点击整页变灰的效果

<html>



<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title> http://hi.csdn.net/YoungEngineer/profile 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/>



<br/> 

注:本页面仅在dreamwear下测试过。其它浏览器或其它版本未经测试。改进了一下,IE7下可以关闭了,firefox下还有些缺陷,页面超过一屏时,下边没有遮住。可以写脚本实现。
<br/>        

div>





<select><option >testoption>select>

<input type=button value="点击将页面灰掉" onclick="disableBodyArea(true);">

<br><br><br><br>

<br><br><br><br>

<select><option >testoption>select>

<br><br><br><br>

<br><br><br><br>

<select><option >testoption>select>

<select><option >testoption>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>

你可能感兴趣的:(Div+Css)