Dark Overlay that Closes on Click?

Question

I am very new to programming and I am trying to setup a dark overlay over a whole page of my site, except some content with z-index. But the issue is the following, I need to be able to close/disable the dark overlay once I press on the overlay, I have not been able to find a way to do it on Google or on Stackoverflow. The only way I have seen it done is by using a button but that won't work in my instance, I just want to be able to disable the dark overlay when you click on any part of the dark overlay.

Any ideas to solve this?

Answer 1

You should use JavaScript (and jQuery) for that:

Event listener for click and then hide overlay

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