JSFiddle - React, Tailwind, and code Playground

HTML

<div style="display: block; width: 100%">

  <div>
      Other stuff
  </div>
  <table id="curtain" width="300px" cellpadding="10">
      <tr>
          <td class="aboveCurtain" >
              <input type="text" value="STAND OUT">
          </td>
          <td class="aboveCurtain">
              <input type="text" value="STAND OUT">
          </td>
          <td>
              Element that will NOT stand out
          </td>
      </tr>
  </table>

  <div>
      Other stuff 
  </div>

</div>

CSS

.aboveCurtain
{
    z-index: 200; /* has to have a higher index than the curtain */
    position: relative;
    background-color: pink;
}

#curtain
{
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    background-color: black;
    width: 300px;
    z-index:100;   
    opacity:0.5 /* change opacity to 0 to make it a true glass effect */
}

JavaScript

$("body").click(function(e) {
	//$('#curtain').on("click", function(e) {
  if (e.target.id == "curtain" || $(e.target).parents("#curtain").length) {    
      //$(this).hide();
      alert("clicked inside of elements that ");
  } else {
  	alert("clicked outside of elements ");
  }
    
});