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>
        <p>Some text that should be selectable</p>
        <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();
    })
    .children().click(function() {
        return false;      
    });