CSS学习笔记(六)

代码:

 

<!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>

 效果:


CSS学习笔记(六)_第1张图片

 

 

遮蔽层原理 :遮蔽层是将一个DIV层设为半透明,然后将其高度、宽度、z-index设成最大,显示在最上面。

 

你可能感兴趣的:(JavaScript,jquery,浏览器,css,IE)