JSFiddle - React, Tailwind, and code Playground

by Darth Vader

HTML

<script src="https://rawgithub.com/dimsemenov/Magnific-Popup/master/dist/jquery.magnific-popup.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css">
<button class="popup-modal" href="#test-modal">Popup</button>
<div id="test-modal" class="mfp-hide  white-popup">
    <p>Popup Main Content Container</p>
    <button class="closePopup">Close</button>
</div>
<div id="overlay">
    <p>In progress.....</p>
</div>

CSS

.white-popup {
    position: relative;
    background: #FFF;
    padding: 20px;
    width: auto;
    max-width: 500px;
    margin: 20px auto;
}

JavaScript

$('.popup-modal').magnificPopup({
    type: 'inline',
    modal: false

});

$(document).on('click', '.closePopup', function (e) {
    e.preventDefault();
    var container = $("#test-modal");
    var overlay = $("#overlay");
    //overlay.prop("style", "position:relative; float:left;");
    console.log(container, overlay);
    overlay.width(container.prop("clientWidth"));
    overlay.height(container.prop("clientHeight"));

    overlay.show();

    container.append(overlay);
    console.log("Here!");


});