JSFiddle - React, Tailwind, and code Playground

by serious017

HTML

<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 class="col-xs-6 col-sm-3 col-md-3">
				<div class="wow bounceInUp" data-wow-delay="0.5s">
                <div class="team boxed-grey">
                    <div class="inner">
						<h5>Вишедневна Саветовања</h5>
                        <p class="subtitle">Јавне набавке у пракси</p>
                        <div class="avatar">


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

                    </div>
                </div>
				</div>
            </div>
 </div>
 
         <div class="row">
			<div class="col-xs-6 col-sm-3 col-md-3">
				<div class="wow bounceInUp" data-wow-delay="0.8s">
                <div class="team boxed-grey">
                    <div class="inner">
						<h5>Виртуална<br>Саветовања</h5>
                        <p class="subtitle">Саветовања преко Интернета</p>
                        <div class="avatar">


<a href="#dialog_es" name="modal">
<img src="img/team/3.jpg" alt="" class="img-responsive img-circle" /></a>

</div>

                    </div>
                </div>
				</div>
            </div>
			<div class="col-xs-6 col-sm-3 col-md-3">
				<div class="wow bounceInUp" data-wow-delay="1s">
                <div class="team boxed-grey">
                    <div class="inner">
						<h5>Стручна<br>Литература</h5>
                        <p class="subtitle">Књиге и...

CSS

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

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;
}

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

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

JavaScript

$(document).ready(function() {	

	//select all the a tag with name equal to modal
	$('a[name=modal]').click(function(e) {
		//Cancel the link behavior
		e.preventDefault();
		
		//Get the A tag
		var id = $(this).attr('href');
	
		//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();
	});			

	$(window).resize(function () {
	 
 		var box = $('#boxes .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});
               
        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        box.css('top',  winH/2 - box.height()/2);
        box.css('left', winW/2 - box.width()/2);
	 
	});		
});