JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div id="file_img"><img src="http://i.hdws.org/f/7d8a/r/b6727a3685.jpg" width="150px" height="150px"></div>
		
		
		<div id="boxes">
			<div id="mask"></div>
			<div class="window" id="file_viewer_window">
				<table class="modalWindow">
					
					<tr>
						<td><div id="img_src"></div></td>
					</tr>
					<tr>
						<td><div id="object_preview"></div></td>
					</tr>
					<tr>
						<td><a href="" id="window_close" class="close">close</a></td>
					</tr>
				</table>
			</div>
		</div>

CSS

#mask {
			top: 0;
			position: absolute;
			z-index: 9000;
			background-color: yellow;
			display: none;			
			}
			
			#boxes .window {
			display: none;
			z-index: 9999;
			}
			
			#file_viewer_window {
			position: absolute;
			background-color: green;
			padding:10px;
			border: 1px black solid;
					
			}
			
			a#window-close {
			font-size: 15px;
			color: black;
			border: 1px black solid;
			}
			
			table.modalWindow {
			color: black;
			background: white;
			text-align: center;
		
			}
			
			img{
			
			
			}
			
			#img_src img{
			      width: 100%;
          height: auto;
			}
      #boxes {
        position: relative;
        width: 590.8px
        height: 516.6px;
      }

JavaScript

$(document)
			.on(
			'click',
			'#file_img',
			function() {
				var viewedFileName = $(this)
				.parent().find(
				"#file_name")
				.find("a").text();
				console.log(viewedFileName);
				var id = $('#file_viewer_window');
				// Get the screen height and width
				var maskHeight = $(document)
				.height();
				var maskWidth = $(window)
				.width();
				
				// Set height and width to mask to fill up the whole screen
				$('#mask').css({
					'width' : maskWidth,
					'height' : maskHeight
				});
				
				// transition effect
				$('#mask').fadeIn(1000);
				$('#mask').fadeTo("slow", 0.8);
				
				// Get the window height and width
				var winH = $(window).height();
				var winW = $(window).width();
				
				var modalH = winH - winH*0.3;
				var modalW = winW - winW*0.3;
				
				// Set the popup window to center
				$(id).css('top', 0);
				
				// transition effect
				$(id).fadeIn(2000);
				var displayImage = "<img src=\"http://i.hdws.org/f/7d8a/r/b6727a3685.jpg\" >";
				id
				.find(
				"#img_src").find('img')
				.remove();
				
					
				
				id				.find(				"#img_src")				.append(				displayImage);
				
					$(id).width(modalW).height(modalH);		
					
				id
				.find(
				'img')
				.load(
				function() {
					viewerWidth = $(
					"#file_viewer_window")
					.width();
							
			
				});		
				
				$('.window .close').click(function(e) {
					// Cancel the link behavior
					e.preventDefault();
					$('#mask, .window').hide();
				});
				// if mask is clicked
				$('#mask').click(function() {
					$(this).hide();
					$('.window').hide();
				});
			});