Popupbox点击外面

Question

你好我有一个弹出框，我想当我点击它外面自动关闭弹出窗口，我有代码打开并通过链接关闭它但我不能通过点击背景或在正文关闭它可以some1帮帮我？

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

.popup-position{
  position :fixed;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.7);
  width: 100%;
  height: 100%;
  display: none;
}

#popup-wrapper{
  width: 500px;
  transform: translateX(85%) translateY(200%);

}

#popup-container{
  background-color:white;
  padding: 20px;

}

<div id="popup-box1" class="popup-position">
      <div id="popup-wrapper">
        <div id="popup-container">
          <h3>PopUp 1 teste contactos</h3>
          <p><a href="javascript:void(0)" onclick="toggle_visibility('popup-box1');">Close PopUp</a></p>
          <p
        </div>
      </div>
    </div>

  </div>

  <p><a href="javascript:void(0)" onclick="toggle_visibility('popup-box1');">Open PopUp</a></p>

Answer 1

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

.popup-position{
  position :fixed;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.7);
  width: 100%;
  height: 100%;
  display: none;
}

#popup-wrapper{
  width: 500px;
  transform: translateX(85%) translateY(200%);

}

#popup-container{
  background-color:white;
  padding: 20px;

}

<div id="popup-box1" class="popup-position" onclick="toggle_visibility('popup-box1');">
      <div id="popup-wrapper">
        <div id="popup-container">
          <h3>PopUp 1 teste contactos</h3>
          <p><a href="javascript:void(0)" onclick="toggle_visibility('popup-box1');">Close PopUp</a></p>
          <p
        </div>
      </div>
    </div>

  </div>

  <p><a href="javascript:void(0)" onclick="toggle_visibility('popup-box1');">Open PopUp</a></p>

只需在最顶层的父元素上添加切换处理程序即可。在你的情况下<div id="popup-box1" class="popup-position" onclick="toggle_visibility('popup-box1');">