JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="invoker">Invoke overlay</a>
<div class="parent">
    <div class="child">
        <p>Don't disappear when you click the white!</p>
        <input type="text" value="Can't activate" /><br/>
        <a href="#">A link that should be clickable</a>
    </div>
</div>

CSS

div.parent
{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-color: lightgray;
    text-align: center;
    display: none;
}

div.parent div.child
{
    position: relative;
    z-index: 3;
    width: 300px;
    margin: 50px auto 0;
    background-color: white;
    border: thin solid black;
}

JavaScript

$('a.invoker').click(function(e){
    $('.parent').show();
});

$('.parent').click(function(e){
    $(this).hide();
});