JSFiddle - React, Tailwind, and code Playground

by Aleksander

HTML

<a href="#modal1" class="open_modal">Посмотреть</a>

<div id="modal1" class="modal_div"> 
	<span class="modal_close buttonmodal">X</span>
	<iframe src="http://site1.ru/"></iframe>
</div>
<div id="modal2" class="modal_div"> 
	<span class="modal_close buttonmodal" >X</span>
	<iframe src="http://site2.ru/"></iframe>
</div>

<div id="overlay" class="podlogka"></div>

JavaScript

$(document).ready(function() { 
    var overlay = $('#overlay'); 
    var open_modal = $('.open_modal'); 
    var close = $('.modal_close, #overlay'); 
    var modal = $('.modal_div'); 

     open_modal.click( function(event){ 
         event.preventDefault(); 
         var div = $(this).attr('href'); 
         overlay.fadeIn(400, 
             function(){ 
                 $(div) 
                     .css('display', 'block') 
                     .animate({opacity: 1}, 200); 
         });
     });

     close.click( function(){ 
            modal 
             .animate({opacity: 0}, 200, 
                 function(){ 
                     $(this).css('display', 'none');
                     overlay.fadeOut(400); 
                 }
             );
     });
});