JSFiddle - React, Tailwind, and code Playground

by _rov

HTML

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

CSS

#alert{
    border:1px solid #000;
    display:none;
    position:fixed;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -100px;
    height:100px;
    width:200px;
}
.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");        
    }
    
    $("#alertClose").click(function(){
       removeAlertBox(); 
    });
    $("#alertShow").click(function(){
       showAlertBox(); 
    });
});