JSFiddle - React, Tailwind, and code Playground

by jessikwa

HTML

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

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

CSS

.popup_block{
    display: none;
    width: 300px;
    background: #151515;
    color: white;
    padding: 20px;
    position: fixed;
    top: 40%;
    left: 50%;
    z-index: 99999;
}
.close {
    cursor: pointer;
}
a {
    cursor: pointer;
    display: block;
}
a:hover {
    color: blue;
}

JavaScript

$("document").ready(function() {
    
    $(".close").click(closeMe);
    
    $("a").click(function() {
        closeMe();
        var popID = $(this).attr("class"); 
        $("div." + popID).fadeIn();
    });
        
    function closeMe() {
        $(".popup_block").fadeOut();
    }
    
});