JSFiddle - React, Tailwind, and code Playground

by fallenreaper

HTML

<a href="#" id = "modalClick">Expand Modal</a><br />
<a href = "#" id = "loadingClick">Load Images</a><br />
<div class = "overlay"></div>
<div class = "modal">
    <table>
        <tr><td>row 1</td></tr>
        <tr><td>row 2</td></tr>
        <tr><td><a href="#" id = "returner">return</a></td></tr>
    </table>
</div>
<div class = "loadingImage">
    <img alt = "Loading...." id = "loadingImage" src = "http://cdn.rndimg.com/ImageStore/OilPaintingRed/50x50_OilPaintingRed_53230e148c6d4809a6666d9af49838d9.jpg" />
    <br />
    <a href="#" id = "returner2">Return</a>
</div>

CSS

.overlay
        {
            
            background: transparent url('http://cdn.rndimg.com/ImageStore/OilPaintingBlue/50x50_OilPaintingBlue_d2738e54efde4c06af6e615c812673fd.jpg') repeat top left;
            
    position: fixed;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
            z-index: 7000;
}

.modal
        {
            font-size: 0.8em;
            font-family: Arial,Verdana,Sans-Serif;
            text-align: left;
            vertical-align: middle;
            padding: 10px 5px;
            color: #DDD;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            line-height: 1.2em;
            overflow: auto;
            padding: 0.8em 0;
            display: none;
            background-color: #FFFFFF;
            color: #111111;
            font-weight: bold;
            padding: 10px;
            position: absolute;
            border-top: 10px solid #A4A4A4;
            border-bottom: 10px solid #A4A4A4;
            border-left: 10px solid #A4A4A4;
            border-right: 10px solid #A4A4A4;
            z-index: 7050;
}
.loadingImage{
    background-color:white;
    left: 100px;
    top:100px;
    position:absolute;
    z-index: 7075;
}

#loadingImage{
    
}

JavaScript

$(function(){
   $(".modal, .overlay, .loadingImage").hide(); 
});

$("#modalClick").click(function(){
    $(".overlay").fadeTo(1000,.7);
    $(".modal").show();
});
$("#returner").click(function(){
    $(".overlay, .modal").fadeOut();
});
$("#returner2").click(function(){
    $(".overlay, .loadingImage").fadeOut();
});
$("#loadingClick").click(function(){
    $(".overlay").fadeTo(1000,.7);
    $(".loadingImage").show();
});