单击关闭的深色覆盖？

Question

我是编程的新手，我正在尝试在我网站的整个页面上设置深色覆盖，除了一些带有 z-index 的内容。但问题如下，我需要能够 close/disable 按下覆盖层后的深色覆盖层，但我无法在 Google 或 Whosebug 上找到执行此操作的方法。我看到它完成的唯一方法是使用按钮，但这在我的实例中不起作用，我只想在您单击深色覆盖的任何部分时能够禁用深色覆盖。

有解决这个问题的想法吗？

Answer 1

你应该使用 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>

单击关闭的深色覆盖？

Dark Overlay that Closes on Click?

html

css

overlay