html - 点击时关闭的深色覆盖物？

我对编程非常陌生，我尝试在网站的整个页面上设置深色覆盖，除了某些带有z-index的内容。但是问题出在下面，按下覆盖层后，我必须能够关闭/禁用深色覆盖层，但我找不到在Google或Stackoverflow上做到这一点的方法。我看到它完成的唯一方法是使用按钮，但在我的实例中不起作用，我只想能够在单击深色覆盖层的任何部分时禁用深色覆盖层。

有什么解决办法吗？

最佳答案

您应该为此使用JavaScript（和jQuery）：

单击事件监听器，然后隐藏覆盖

$(document).click(function() {
  $('#overlay').css('display', 'none');
});

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  background-color: grey;
  width: 100%;
  height: 300px;
  opacity: 0.6;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
This is the content below the overlay
</div>
<div id="overlay">
</div>

关于html - 点击时关闭的深色覆盖物？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59080603/