<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>点击空白处关闭弹窗</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style>
.box {
margin: 50px auto;
width: 100px;
height: 100px;
background-color: pink;
display: none;
}
</style>
</head>
<body>
<button id="btn">点我</button>
<div class="box"></div>
<script>
$('#btn').on('click', function(e) {
$('.box').show()
})
click("box", "box");
function click(name, box) {
$(document).on("click", function(e) {
var _conss = $('.' + name); //点击的容器范围
if (!_conss.is(e.target) && !$('#btn').is(e.target) && _conss.has(e.target).length === 0) {
$("." + box).hide(); //选择要关闭的容器
}
});
}
</script>
</body>
</html>
