JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button"  value="open" />
    <iframe id="test" src=""></iframe>

    <div id='mask' class='close_modal'></div>

CSS

#mask
        {
            position:absolute; /* important */
            top:0px; /* start from top */
            left:0px; /* start from left */
            height:100%; /* cover the whole page */
            width:100%;  /* cover the whole page */
            display:none; /* don't show it '*/

            /* styling bellow */
            background-color:white;
        }

        #test,.modal_window
        {
            position:absolute; /* important so we can position it on center later */
            display:none; /* don't show it */
            
            width:400px;
            height:200px;
            border:none;
            z-index:2012;

            
            /* styling bellow */
            padding:10px;
            color:black;
            background:white;
        }

JavaScript

var window_width = $(window).width();
var window_height = $(window).height();

$('input').click(function(){
    var modal_height = $('#test').height();
    var modal_width = $('#test').width();

    var top = (window_height - 100) / 2;
    var left = (window_width - 200) / 2;

    $('#mask').css({ 'display': 'block', opacity: 0 });
    $('#mask').fadeTo(500, 0.8);

                               $('#test').css({'width':0,'height':0,'top':$('input').offset().top,'left':$('input').offset().left})
           .show()
 .animate({'width':'200px','height':'100px','top':top,'left':left});
        });

        $('#mask').click(function () {            
            $('#mask').fadeOut(500);
            $('#test').animate({
                'width':0,
                'height':0,
                'top':$('input').offset().top,
                'left':$('input').offset().left
            },function(){
                //$(this).hide();        
            }).hide();

        });