JSFiddle - React, Tailwind, and code Playground

by Igaojsfiddle

HTML

<a href="#" class="lightbox">Open Lightbox</a>

<div class="backdrop"></div>
<div class="box">
    <div class="close">x</div>
    <div class="cabecalho"></div>
    <div class="corpo"></div>
    <div class="botoes"></div>
</div>

CSS

body {
    font-family: Helvetica, Arial;
}
.backdrop {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:auto;
    background:#000;
    opacity: .0;
    filter:alpha(opacity=0);
    z-index:50;
    display:none;
}
.box {
    position:absolute;
    background:#ffffff;
    z-index:51;
    display:none;
    top: 50%;
    left: 50%;
    margin-left: -250px;
    margin-top: -150px;
    width:500px;
    height:300px;
}
.close {
    float:right;
    margin-right:6px;
    cursor:pointer;
}
.cabecalho{
    height:10%;
    width:100%;
    background-color:red;
}
.corpo{
    height:75%;
    width:95%;
    background-color:yellow;
    margin:10px;
}
.botoes{
    height:10%;
    width:100%;
    background-color:green;
}

JavaScript

$(document).ready(function () {
    $('.lightbox').click(function () {
        $('.backdrop, .box').animate({
            'opacity': '.50'
        }, 300, 'linear');
        $('.box').animate({
            'opacity': '1.00'
        }, 300, 'linear');
        $('.backdrop, .box').css('display', 'block');
    });

    $('.close').click(function () {
        close_box();
    });

    $('.backdrop').click(function () {
        close_box();
    });
});


function close_box() {
    $('.backdrop, .box').animate({
        'opacity': '0'
    }, 300, 'linear', function () {
        $('.backdrop, .box').css('display', 'none');
    });
}