JSFiddle - React, Tailwind, and code Playground

by Flandre

HTML

<div>
    Other stuff
</div>
<table width="800px" 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 id="curtain"/>

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: 100%;
    z-index:100;   
    opacity:0.5 /* change opacity to 0 to make it a true glass effect */
}

JavaScript

$('#curtain').on("click", function(e) {
    
    $(this).hide();
    alert("clicked ouside of elements that stand out");
    
});