JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<img src="http://placekitten.com/g/500/77" class="lightbox" />

CSS

* {margin:0;border:0;padding:0}
body {height:100%;}
.overlay {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background:#000;
    opacity:0;
    filter:alpha(opacity=0);
    z-index:50;
    cursor:pointer;
}
.container {
    position:absolute;
    opacity:0;
    filter:alpha(opacity=0);
    left:-9999em;
    z-index:51;
}
a, p {display:block;padding:1em;outline:none;}
a {text-align:center;background:#f0f0f0;margin-top:1em;}
p a {color:#5b6;border-bottom:1px solid;display:inline;padding:0;text-decoration:none;background:none;text-align:left;}
p a:hover,
p a:focus,
p a.hover {background:#efe;color:#000;outline:none;}

JavaScript

// http://kilianvalkhof.com/2008/javascript/building-your-own-lightbox-part-1/
//



$(document).ready(function(){
// add a click event
    $(".lightbox").click(function(){
        overlayLink = $(this).attr("href");
        window.startOverlay(overlayLink);
        return false;
    });
});

function startOverlay(overlayLink) {
//add the elements to the dom
    $("body")
        .append('<div class="overlay"></div><div class="container"></div>')
        .css({"overflow-y":"hidden"});

//animate the semitransparant layer
    $(".overlay").animate({"opacity":"0.6"}, 400, "linear");

//add the lightbox image to the DOM
    $(".container").html('<img src="'+overlayLink+'" alt="" />');

//position it correctly after downloading
    $(".container img").load(function() {
        var imgWidth = $(".container img").width();
        var imgHeight = $(".container img").height();
        $(".container")
            .css({
                "top":        "50%",
                "left":       "50%",                
                "width":      imgWidth,
                "height":     imgHeight,
                "margin-top": -(imgHeight/2),
                "margin-left":-(imgWidth/2) //to position it in the middle
                
            })
            .animate({"opacity":"1"}, 400, "linear");

// you need to initiate the removeoverlay function here, otherwise it will not execute.
        window.removeOverlay();
    });
}
function removeOverlay() {
// allow users to be able to close the lightbox
    $(".overlay").click(function(){
        $(".container, .overlay").animate({"opacity":"0"}, 200, "linear", function(){
            $(".container, .overlay").remove();    
        });
    });
}