<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">var mskDiv;
function Show()
{
mskDiv = document.createElement("div");
mskDiv.id = "mskDiv";
mskDiv.innerHTML = "遮罩层,点击关闭。";
mskDiv.onclick=Hidden;

mskDiv.style.left = "0px";
mskDiv.style.top  = "0px";
mskDiv.style.width = "100%";
mskDiv.style.height= "100%";

document.body.appendChild(mskDiv);
}
function Hidden()
{
if(mskDiv)
{
document.body.removeChild(mskDiv);
}
}
</script>
<style type="text/css">
<!--
#mskDiv{
position:absolute;
background-color: #CCCCFF;
filter:alpha(opacity=90);
}
-->
</style>
</head>
<body>
<input type="button" name="btMsk" id="btMsk"  onclick="Show()" value="Show()" />
</body>
</html>

解决方案 »

  1.   

    这个很多效果和csdn一样,
    我这里有例子,如果需要的话,向我索取。
      

  2.   

    1楼改成
    position:absolute;
    不然一出滚动条就罩不住了,遗憾的是IE6不支持这个CSS,要兼容还会更麻烦。
    同理对于窗口的resize事件也要处理,不然小窗口拖大的时候也会罩不住,而大窗口拖小就会出滚动条。
      

  3.   

    手误,应该是
    position: fixed;
      

  4.   

    http://www.scriptlover.com/controls/shadowbox/
      

  5.   

    最不喜欢楼上这种动不动就用框架的,现在连CSS都框架泛滥了,一同事就为了简单的JS渐变效果,就用了完整的jQuery框架。