javascript点击除div盒子本身之外的任意地方时,关闭div盒子弹框

html+js代码: 

		<div id="container">
			<button id="btn">点击打开弹框</button>
			<div id="box">我是弹框</div>
		</div>
		<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
		<script type="text/javascript">
			$("#btn").click(function() {
				$("#box").show();
			});
			//点击除按钮和div弹框之外任意地方时,隐藏弹框
			$("body").click(function(e) {
				if(!$(e.target).closest("#btn,#box").length) {
					$("#box").hide();
				}
			});
		</script>

提供一下测试用例的全部代码,可能有小白需要:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>javascript点击除div盒子本身之外的任意地方时,关闭div盒子弹框</title>
		<style type="text/css">
			#container {
				width: 800px;
				margin: 0 auto;
				background-color: #eee;
				padding: 50px;
				text-align: center;
			}
			
			#box {
				width: 500px;
				height: 300px;
				line-height: 300px;
				color: #fff;
				background-color: green;
				margin: 10px auto;
				display: none;
			}
		</style>
	</head>

	<body>
		<div id="container">
			<button id="btn">点击打开弹框</button>
			<div id="box">我是弹框</div>
		</div>
		<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
		<script type="text/javascript">
			$("#btn").click(function() {
				$("#box").show();
			});
			//点击除按钮和div弹框之外任意地方时,隐藏弹框
			$("body").click(function(e) {
				if(!$(e.target).closest("#btn,#box").length) {
					$("#box").hide();
				}
			});
		</script>
	</body>

</html>