遮蔽层实现技巧-优快云博客

代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <script src="jquery-1.3.2.min.js" type="text/javascript">
        </script>
        <script type="text/javascript">
            $(function(){
				//点击显示遮蔽层并动态设置遮蔽层的高度
				$("button").click(function(){
					$("#overlayer").css("display","block").height($(document).height());
				});
            });
        </script>
        <style type="text/css">
            body {
                margin: 0; /*除去body和浏览器之间的间距*/
/*
				height:100%;
*/
            }
            
            #overlayer {
                background-color: #000000;
				/* 百分之百是指父容器高度的百分之百， 
				 * 所以在IE中如果没有指定body的父容器的高度，
				 * 则子元素的100%只是一个默认的高度,但FF却不会
				 * FF中会显示当前浏览的高度，为了适应内容 的高度，
				 * 在这里动态设置高度。
				 * */
                height: 100%;
                opacity: 0.7;
                *filter: alpha(opacity = 70);
                position: absolute;
                width:100%;
                z-index:3;
				/*初始不显示遮蔽层*/
				display:none;
            }
            
            #container {
                width: 100%;
                background: red;
				height:1000px;
            }
        </style>
    </head>
    <body>
        <div id="overlayer">
        </div>
        <div id="container">
        	<button>试试</button>
        </div>
    </body>
</html>

效果：