因此，我在页面顶部有一个搜索“模态框”（自己的 html + css，而不是 bootstrap）。当我单击搜索栏时，我想打开模态框。然后，当它打开时，我想通过单击“X”按钮或模态框外的任何地方使其可关闭。

打开模态框并通过按下按钮关闭它，此代码段可行：

<script  type="text/javascript">
  var search_box =  document.querySelector('#search-box-top');
  var search_box_bg =  document.querySelector('#search-box-top-bg');

  document.querySelectorAll('#close-search-box').forEach(el => el.addEventListener('click', function() {
    search_box.style.display = 'none';
    search_box_bg.style.display = 'none';
  }))

  document.querySelectorAll('#open-search-box').forEach(el => el.addEventListener('click', function() {
    search_box.style.display = 'block';
    search_box_bg.style.display = 'block';
  }))   
</script>   

现在我有此代码来查看点击是发生在模态框内还是模态框外：

 var specifiedElement = document.getElementById('search-box-top');
 var search_box_visible = document.getElementById('search-box-top').style.display;

if (search_box_visible = 'none') {
document.addEventListener('click', function(event) {
    var isClickInside = specifiedElement.contains(event.target);
    if (isClickInside) {
     console.log('You clicked inside')
    }
    else {
      console.log('You clicked outside')
    }
});
} else {

}

问题是第二个函数在模态框仍处于关闭状态时也有效，因此控制台始终记录“您点击了外面”。因此我需要当 search_box_visible = none 时 isClickInside 起作用，并且当它是块时它应该返回设置 display = 'none' 的 else 函数；

有人知道如何结合这两者或制作一个更好的函数来做到这一点吗？提前谢谢！