javascript - 关闭框点击它外面

Question

我从网上得到了一个代码。我单击文本 > 打开一个框。

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

这是我的 javascript 代码:

function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}

这是我的 HTML 代码:

<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>

这是我的 CSS 代码:

 #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; }

Answer 1

使用 JavaScript 的 onfocusout 处理器

示例:

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

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

NOTE: Replace BOXID with the id of the box u want to close

另请参阅:Tutorial: onfocusout Event