JSFiddle - React, Tailwind, and code Playground

HTML

<div id="alert">
    <div id='transBG'></div>
    <div id="alertbox">I am an alert box <span id="alertClose">X</span>
    </div>
</div>
<div id="content">Content <span id="alertShow">Show Alert Box</span>

</div>

CSS

#alert {
    display:none;
}
#alertbox {
    border:1px solid #000;
    position:fixed;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -100px;
    height:100px;
    width:200px;
    z-index:9;
}
#transBG {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:8;
}
.back {
    opacity:0.5;
}

JavaScript

$(document).ready(function () {
    function showAlertBox() {
        $("#alert").css("display", "inherit");
        $("#content").addClass("back");
    }

    function removeAlertBox() {
        $("#alert").css("display", "none");
        $("#content").removeClass("back");
    }


    $("#transBG").click(function () {
        removeAlertBox();
    });

    $("#alertClose").click(function () {
        removeAlertBox();
    });
    $("#alertShow").click(function () {
        showAlertBox();
    });
});