关闭框在其外部单击

Question

我从网上获得了一个代码。我点击文字＆gt;打开一个盒子。

我想在框外单击时关闭该框。

这是我的javascript代码：

<div value='Show Layer' onclick="setVisibility('sub2', 'inline');">
  <span>SHOW BOX</span>
</div>

<div id="sub2">
  <p>This is a test for box.</p>
  <button value='Hide Layer' onclick="setVisibility('sub2', 'none');" ;>Click to close box</a>
</div>

这是我的HTML代码：

 #sub2 { width: 500px; color: black; display: none; background:#eeeeee; display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; overflow: auto; / }
 #sub2 h5 { font-family: 'Varela Round', sans-serif; font-size:20px; }

这是我的CSS代码：

{{1}}

Answer 1

使用JavaScript的onfocusout处理程序

示例：

<script>
document.getElementById("BOXID").addEventListener("focusout", myFunction);

function myFunction() {
    document.getElementById("BOXID").style.visibility='hidden';
}
</script>

  

注意：将BOXID替换为您要关闭的框的ID

另请参阅：Tutorial: onfocusout Event