JSFiddle - React, Tailwind, and code Playground

by Adam Poczatek

HTML

<a href="http://www.helptionary.com/wp-content/uploads/2010/06/greener-grass.jpg" rel="lightbox"><img src="http://www.helptionary.com/wp-content/uploads/2010/06/greener-grass.jpg" width="100" height="70" /></a>

CSS

#overlay { position: absolute; background: #000; opacity: 0.6; width: 100%; height: 100% }

JavaScript

$('body').append('<div id="overlay"></div><div id="lightbox"></div>);
$('#lightbox').hide();

$('a[rel="lightbox"]').click(function() {
    var imgURL = $(this).attr('href');
    
    return false;
});