JSFiddle - React, Tailwind, and code Playground

by Peter Richards

HTML

<a id="some-button" href="#"><img src="http://getscriba.businesscatalyst.com/assets/gallery_cocolinpress.jpg" width="200"/></a> 
<div id="overlay-back"></div> 
<div id="overlay"><img src="http://getscriba.businesscatalyst.com/assets/gallery_skunksis.jpg" width="259"/><div id="text"><h2>Joe Bloggs</h2>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi.</div></div>

CSS

html, body {
    width  : 100%;
    height : 100%;
}
#overlay-back { 
    position   : absolute; 
    top        : 0; 
    left       : 0; 
    width      : 100%; 
    height     : 100%; 
    background : #000; 
    opacity    : 0.85; 
    filter     : alpha(opacity=60); 
    z-index    : 5;
    display    : none;
} 
 
#overlay { 
    background-color:white;
    position : absolute;
    top      : 12.5%; 
    left     : 25%; 
    width    : 50%; 
    height   : 75%; 
    z-index  : 10;
    display  : none;
} 

#text{
    padding: 5px 5px;
    font-family:arial;
}

JavaScript

$('#some-button').on('click', function () { 
    $('#overlay, #overlay-back').fadeIn(500); 
});

$('#overlay-back').on('click', function(){
    $('#overlay, #overlay-back').fadeOut(200);
});

$(document).keyup(function(e) {
  if (e.keyCode == 27) { $('#overlay, #overlay-back').fadeOut(200); }   
});