JSFiddle - React, Tailwind, and code Playground

by Gary Stubbenhagen

HTML

<br /><a class="open"><p>Click to open overlay</p></a>

<div id="overlay">
</div>
<div id="content">
Content contained within overlay
</div>

CSS

body {
    padding:5px;
    font-family:Tahoma;
    font-weight:bold;
}

#overlay { 
    display:none;
    background-color:black;
   filter:alpha(opacity=50);
   -moz-opacity:0.7;
   -khtml-opacity: 0.7;
   opacity: 0.7;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 2;
}

#content {
    padding:5px;
    display:none;
    width:50%;
    height:50%;
    position:absolute;
    top:25%;
    left:25%;
    z-index:5;
    background-color:rgb(255,255,255);
}

JavaScript

$("a.open").click(function() {

    $('#overlay').fadeTo(200, 0.5);
    $('#content').fadeTo(200, 0.5);

});