点击显示模态框，再点击模态框以外区域隐藏盒子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
height: 200px;
width: 200px;
background: pink;
margin: 200px auto;
display: none;
}
</style>
</head>
<body>
<button>点击显示</button>
<div class="box"></div>
<script>
var but=document.getElementsByTagName("button")[0];
var div=document.getElementsByClassName('box')[0];
but.onclick=function(event){
div.style.display="block";
event = event || window.event;
if(event && event.stopPropagation){
event.stopPropagation(); //阻止冒泡
}else{
event.cancelBubble = true;
}
}
document.onclick=function(event){
event=event||window.event;
var aaa=event.target||event.elementSrc;
if(aaa.className!=="box"){
div.style.display="none";
}
else{
div.style.display="block";
}
}
</script>
</body>
</html>