JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box1 popup_block">
    HEY
</div>
<div class="box2 popup_block">
    YO
</div>
<div class="box3 popup_block">
    hello
</div>

<a class="box1">Box 1</a>
<a class="box2">Box 2</a>
<a class="box3">Box 3</a>

CSS

.popup_block{
    display:none;
    background:#151515;
    padding:20px;
    float:left;
    position:fixed;
    top:40%;left:50%;
    z-index: 99999;
    line-height:20px;

}

*html .fade {position: absolute;}
*html .popup_block {position: absolute;}
.fade {
    display:none;
    position:fixed;
    left:30%;
    top:0px;
    width:70%;
    height:100%;
    z-index:9999;
    background:#000; /* change to #fff for solid white */
    opacity:1; /* change to opacity:1; */
}
.close {
    color: white;
}
}

JavaScript

$("document").ready(function() {
    $("a").click(function () {
        var popID = $(this).attr("class"); 
        var tarDiv = $("div." + popID);
        
        var popMargTop = (tarDiv.height() + 10) / 2;
        var popMargLeft = (tarDiv.width() + 80) / 2;
               
        tarDiv.fadeIn()
            .css({
                "width": 300,
                "margin-top": -popMargTop,
                "margin-left": -popMargLeft
            });
        
       
        
        var fadeDiv = $("<div class=\"fade\" style=\"filter:alpha(opacity=80);\" />");
        
        fadeDiv.appendTo($("body"))
            .fadeIn()
            .click(closeMe);
        
        function closeMe() {
            $(".fade , .popup_block").fadeOut(function() {
                $(".fade, a.close").remove();
            });
        }
        
    });
});