JSFiddle - React, Tailwind, and code Playground

by serious017

HTML

<div id="boxes">
<div style="top: 100px; left: 551.5px; display: none;" id="dialog_js" class="window" align=right>
<a href="#" class="close"><img src=".../materijal-slike/close.png" title=Затвори></a><br><center>
<iframe width="730" height="600" src="tabla.html" frameborder="0" allowfullscreen></iframe>
</center>
</div>


<!-- Mask to cover the whole screen -->
<div style="width: 1478px; height: 602px; display: none; opacity: 0.8;" id="mask"></div>
<div class="container">

		<div class="row">
			<div class="col-lg-2 col-lg-offset-5">
				<hr class="marginbot-50">
			</div>
		</div>
        <div class="row">

            <div class="col-xs-6 col-sm-3 col-md-3">
				<div class="wow bounceInUp" data-wow-delay="0.2s">
                <div class="team boxed-grey">
                    <div class="inner">
						<h5>Једнодневна Саветовања</h5>
                        <p class="subtitle">Обуке и радионице</p>
                        <div class="avatar">
                        


<a href="#dialog_js" name="modal">
<img src="img/team/1-1.gif" alt="" class="img-responsive img-circle" /></a>


                    </div>
                </div>
				</div>
            </div>
 </div>
</div> 

<div id="mask"></div>

CSS

body {
font-family:verdana;
font-size:15px;
}

.noscroll { position: fixed; overflow-y:scroll }

a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}
  
#boxes .window {
  position:fixed;
  left:0;
  top:0;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}

#boxes #dialog_js {
  width:750px; 
  height:660px;
  padding:10px;
  background-color:#ffffff;
}

JavaScript

$(document).ready(function() {	

		var id = '#dialog';
	
		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
	
		//Set heigth 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();
              
		//Set the popup window to center
		$(id).css('top',  winH/2-$(id).height()/2);
		$(id).css('left', winW/2-$(id).width()/2);
	
		//transition effect
		$(id).fadeIn(2000); 	
	
	//if close button is clicked
	$('.window .close').click(function (e) {
		//Cancel the link behavior
		e.preventDefault();
		
		$('#mask').hide();
		$('.window').hide();
	});		
	
	//if mask is clicked
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});		
	
});