JSFiddle - React, Tailwind, and code Playground

HTML

<div id='page-wrap'>
    
    Your content goes here.
    
    <a id='show' href='#'>show overlay</a>
    
</div>

<div id='mask'></div>
<div id='popup'>
    
    your popup content goes here.
    
</div>

CSS

* { margin: 0, padding 0}

#mask{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    display: none;
    z-index: 10000;
}

#popup
{
    width: 200px;
    height: 200px;
    margin: 10px auto; 
    border: 1px solid #333;
    background-color: #ffffdd;
    cursor: pointer;
    padding: 10px;
    position: relative;
    z-index: 10001;
    display: none;
}

JavaScript

$(document).ready(function() {

    $("#show").click(function() {
        showPopup();
    });

    $("#popup").click(function() {

        $(this).hide();
        $("#mask").hide();

    });

});


function showPopup() {
    // show the mask
    $("#mask").fadeTo(500, 0.25);

    // show the popup
    $("#popup").show();
}