点击屏幕任意位置，关闭已显示的弹窗

布局(html)：

<div id="bg"></div>
<div id="test">
	<a href="javascript:;" id="button">点击</a>
	<div id="content" style="display:none">show</div>
</div>

样式(css)：

		#test {
			width: 80px;
			height: 60px;
			margin: 10px auto;
			/*border: 1px solid blue;*/
		}
	
		#button {
			display: block;
			width: 50px;
			margin: 10 auto;
		}
		
		#content {
			width: 60px;
			height: 60px;
			text-align: center;
			margin: 10 auto;
			/*background: #1d1d1d;*/
			border: 1px solid red;
		}
		
		#bg{
			position: absolute;
			display: block;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			z-index: -1;
			background: #d4f7d4;
		}

行为(js)：

	// 方法 一 ：
	//$('#bg').hide();
	//
	//$('#button').click(function(){
	//	$('#content').show();
	//	$('#bg').unbind('click');
	//	$('#bg').show();
	//	$('#bg').one('click',function(){
	//		$('#content').hide();
	//	})
	//})
	
	//

	// 方法 二 ：
	//$('#bg').hide();
	//
	//$('#button').click(function(){
	//	$('#content').show();
	//	$('#bg').unbind('click');
	//	$('#bg').show();
	//	$('#bg').one('click',function(){
	//		$('#content').hide();
	//	})
	//})

	 
	/

	// 方法 三：
	 $('#bg').hide();
	 
	 $('#button').on('click',function(){
		 $('#content').css('display','block');
		 $('#bg').off('click');
		 $('#bg').hide();
		 
		 setTimeout(function(){
			 $('#bg').show();
			 
			 $('#bg').one('click',function(){
				 console.log('click ...');
				 $('#content').css('display','none');
					 $('#bg').hide();
				 })
	 	 }, 0);
	 })