jQuery之弹出层(用以提示)

jQuery之弹出层(用于提示)
参考了权威指南的部分代码
实现效果:单击按钮显示层,在单击就隐藏层,层上点击后隐藏层,页面单击后隐藏层,用于常见的提示
使用版本：jQuery 1.6.2
jQuery代码如下：

<script type="text/javascript" >
			
			    $(function()
		        {
		           //动画速度
		            var speed = 500;	
		            //是否显示或者隐藏层的标记
		            var tag = 0;	            
		            
		            $("#btnShow").click(function(event){
		                    //取消事件冒泡
			                event.stopPropagation();
			                if(tag == 1){
			                	tag = 0;
			                	$("#divPop").hide(speed); 
			                }else{
			                    tag = 1;
				                //设置弹出层位置
				                var offset = $(event.target).offset();
				                $("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });							
								//动画显示
			                   $("#divPop").show(speed);
		                   }
					});					
		
		            //单击空白区域隐藏弹出层
		            $(document).click(function(event) { 		             
		            	$("#divPop").hide(speed);
		            	tag = 0;
		            });
		            //单击弹出层则自身隐藏
		            $("#divPop").click(function(event) { 		              
		            	$("#divPop").hide(speed); 
		            	tag = 0;
		            });
		        })	
</script>

页面代码如下：

<div>       
            <button id="btnShow" style="margin-top: 200px;margin-left: 300px">显示提示文字</button>
	    </div>	        
	    <!-- 弹出层 -->
	    <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none;width: 300px; height: 100px;">
	        <div style="text-align: center;">弹出层</div>
	    </div>