JQ实现弹出层效果

html代码
　　<div id="layer"></div>
    <div class="text">
        <a href="javascript:showlayer()">click here show layer</a>
        <div id="pop">O(∩_∩)O~ &nbsp;&nbsp;&nbsp;I am pop layer.</div>
    </div>

css样式
　　　　　body { 
            font-family:Arial, Helvetica, sans-serif; 
            font-size:12px; 
            margin:0px;
            padding:0px; 
        }

        .text{
            width:100%;
            font-size: 20px;
            color: #000;
            text-align: center;
            padding-top: 200px;
        }

        a{
            color: #000;
            text-decoration: none;
        }

        #layer{
            background-color:gray; 
             left:0; 
             opacity:0.5; 
             position:absolute; 
             top:0; 
             z-index:3; 
             filter:alpha(opacity=50); 
             -moz-opacity:0.5; 
             -khtml-opacity:0.5; 
        }

        #pop{
            text-align:center; 
             background-color:#fff; 
             height:200px; 
             left:50%; 
             margin:-200px 0 0 -200px; 
             padding:1px; 
             position:fixed; 
             position:absolute; 
             top:50%; 
             width:360px; 
             z-index:5; 
             border-radius:6px; 
             display:none; 
             line-height: 200px;
        }

　　　　
JS部分

　　　　//show layer
	function showlayer(){
		var bh=$(window).height();//获取屏幕高度
		var bw=$(window).width();//获取屏幕宽度
		$("#layer").css({
			height:bh,
			width:bw,
			display:"block"
		});
		$("#pop").show();
	}

	//close layer
	$("#pop").click(function(){
		$("#layer,#pop").hide();
	})
	$("#layer").click(function(){
		$("#layer,#pop").hide();
	})

　　遮罩层的思路：取屏幕的宽高，赋值给遮罩层。