主要就是两个点击按钮，一个是点击让 div出现，一个是点击空白地方让它消失，在做的时候先给div添加display：none;进行隐藏，第一次去点击按钮，让它变成block，不过要加一个stopPropagation()进行阻止冒泡，然后在写另一个点击消失的事件，变成none就解决了。div的内容自行添加，我这里就添加了一个背景颜色以便于效果实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
height: 300px;
background-color: #BCBCBC;
display: none;
}
</style>
</style>
</head>
<body>
<button>按钮</button>
<div></div>
<script>
var But=document.getElementsByTagName("button")[0];
var oDiv=document.getElementsByTagName("div")[0];
But.onclick=function(e){ //点击出现
oDiv.style.display="block";
e.stopPropagation(); //阻止冒泡
}
// 点击空白消失
document.onclick=function(e){
oDiv.style.display="none";
}
</script>
</body>
</html>