在做弹窗功能的时候有时候是通过在旁边做一个关闭按钮。但在有些时候还是没法做到很好，如果希望点击整个弹窗以外的任何部分都关闭的话那就来看看下面这段代码。
以下代码是完整可行，可直接复制使用查看效果。注释很详细
<p>
一直没显示，我以为你在忙<br/><br/>
lyg 2016/2/17 10:23:12<br/>
哈哈 我还好， <br/><br/>
lyg 2016/2/17 10:23:26<br/>
一般情况下 忙我也会回复你的 <br/><br/>
10:25:10<br/>
影子 2016/2/17 10:25:10<br/>
好滴
</p>
<style type='text/css'>
#box{position:fixed; overflow:hidden; width:600px; height:200px;
background-color:#ccc; left:50%; margin-left:-300px; top:120px; display:none;}
</style>
<div id="box">
这是一行文字，点击我试试
<a href='#' onclick='document.getElementById("rand").value=Math.random();return false;'>超链接</a><br/>
<img src="http://luyugao.com/zb_users/upload/2015/11/201511121447292727823091.jpg" width='160' height='130'/>
<input type="text" id='rand'> <input type='button' value='按钮' onclick="document.getElementById('rand').value='内部元素点击方法执行了';"/>
</div>
<a href="#" id="show">打开弹出层</a>
<script type="text/javascript">
//页面被点击
document.onclick=function(e){
//弹出层对象
var div_box = document.getElementById("box");
if (div_box.style.display != "none") {
//弹出层可视
//点击的对象
var t = (e && e.target) || (event && event.srcElement);
//不是自身且不是点击的弹出按钮
if (t != div_box && t!=document.getElementById('show') ){
div_box.style.display = "none";
}
}
};
//很重要，点击内部元素也不关闭
//box所有子元素的click都会冒泡传递到box使box触发click方法，stopPropagation阻断click继续向祖辈元素冒泡(即不会触发box祖辈元素的click方法)
document.getElementById('box').onclick=function(event){
//阻止当前事件向祖辈元素的冒泡传递
event.stopPropagation();
}
//弹出按钮被点击
document.getElementById('show').onclick=function(){
document.getElementById('box').style.display='block';
};
</script>