如何通过弹出框弹出来关闭JavaScript驱动的HTML弹出框？

Question

我制作一个JavaScript驱动的html弹出框。代码对我来说很完美，但现在我需要按关闭链接关闭弹出框。如何修改以下代码，以便我也可以通过单击弹出框外部来关闭弹出框。

function toggle_visibility(id) {
  var e = document.getElementById(id);
  if (e.style.display == 'block')
    e.style.display = 'none';
  else
    e.style.display = 'block';
}

#popupBoxOnePosition {
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 120%;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
}
.popupBoxWrapper {
  width: 550px;
  margin: 50px auto;
  text-align: left;
}
.popupBoxContent {
  background-color: #FFF;
  padding: 15px;
}

<div id="popupBoxOnePosition">
  <div class="popupBoxWrapper">
    <div class="popupBoxContent">
      <h3>Popup Box 1</h3>
      <p>You are currently viewing popup box 1.</p>
      <p>Click <a href="javascript:void(0)" onclick="toggle_visibility('popupBoxOnePosition');">here</a> to close popup box one.</p>
    </div>
  </div>
</div>

<p>Click <a href="javascript:void(0)" onclick="toggle_visibility('popupBoxOnePosition');">here</a> to see popup box one.</p>

请注意我尝试下面的代码，但它对我不起作用

 $('#popupBoxOnePosition').click(function(event){
                         event.stopPropagation();
 });