JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<div data-popup="popap">Регистрация</div>

CSS

#popup {
    display: none;
    position: fixed;
    z-index: 10000;
}
#popupMask {
    background:#000000;
    bottom: 0;
    display: none;
    left:0;
    opacity: 0.5;
    position:fixed;
    right: 0;
    top:0;
    z-index:9000;
}

JavaScript

var popupDoc = $(document),
    popupStatys = false;
popupDoc.on('click', '[data-popup]', function () {
    $('#popup, #popupMask').remove();
    var c = '';
    popup(c);

}).on('click', '[data-popup_closed]', function () {
    $('body').css('overflow', '');
    $('#popup, #popupMask').fadeOut();

    setTimeout(function () {
        $('#popup, #popupMask').remove();
    }, 400);

});

function popup(c) {
    var winH = $(window).height(),
        winW = $(window).width();
    $('body').append('<div id="popup">CONTENT ' + c + '</div></div><div id="popupMask" data-popup_closed="closed"></div>');
    $('body').css('overflow', 'hidden');
    $('#popup').css('top', winH / 2 - $('#popup').height() / 2).css('left', winW / 2 - $('#popup').width() / 2);
    $('#popup, #popupMask').fadeIn();
    popupStatys = true;

};