JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="theater-wrapper">
<div class="theater-container"></div>
</div>

<img class="theater" src="http://graphics8.nytimes.com/images/2007/10/01/timestopics/google1.jpg"/>
    
</body>

CSS

.theater-wrapper {
    background-color: #CCC;
    position: fixed;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 150;
    min-height:1px;
    /*    background-color: rgba(255,255,255,0.7);
*/
    background-color: rgba(0,0,0,0.7);
    display: none;
    overflow: auto;
}
.theater-wrapper .theater-container {
    background-color: #FFF;
    position: absolute;
    left: 50%;
    top: 8%;
    right: 50%;
    z-index: 151;
    min-height:400px;
    width: 930px;
    margin-right: -485px;
    margin-left: -485px;
    border: 1px solid #000;
    padding: 19px;
    -webkit-box-shadow: #000 0px 0px 10px;
    -moz-box-shadow: #000 0px 0px 10px;
    box-shadow:#000 0px 0px 10px;
    text-align: center;
}
.theater-wrapper .theater-container .image-wrapper {
    margin: auto;
    width: 900px;
}
.theater-wrapper .theater-container .image-wrapper img {
}

JavaScript

$(document).ready(function(){
$("body").on("click","img.theater",function(event){ 

$('.theater-wrapper').show();

$("body, html").css({"overflow":"hidden"});

 
}); 
    

$(".theater-wrapper").click(function(event){
    if ($(event.target).is('.theater-container')){
         event.stopPropagation();
         return;
    }
    $('.theater-wrapper').hide();

    
    
$('.theater-wrapper').hide(); 
$(".theater-container").empty();
$("body, html").css({"overflow":"auto"});
});


});