JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<a href="#" onclick="lightbox_open();">Open lightbox</a>
<div id="media_image_light">
    <img src="http://www.gettyimages.co.uk/gi-resources/images/asset-family/slack-line.jpg">
</div>
<div id="media_image_fade" onClick="lightbox_close();"></div>

CSS

#media_image_fade{
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index:1001;
    -moz-opacity: 0.7;
    opacity:.70;
    filter: alpha(opacity=70);
}
#media_image_light{
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -100px;                 
    z-index:1002;
    overflow:visible;
}

JavaScript

function lightbox_open(){
    window.scrollTo(0,0);
    document.getElementById('media_image_light').style.display='block';
    document.getElementById('media_image_fade').style.display='block';
}

function lightbox_close(){
    document.getElementById('media_image_light').style.display='none';
    document.getElementById('media_image_fade').style.display='none';
}