JSFiddle - React, Tailwind, and code Playground

CSS

/*
 *
 *
 стилизация modal */
#modal {
    background: #ffffff;
    border: 1px solid #999999;
    border-color: #5F5F5F #747474 #999999;
    -webkit-box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.5);
    box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.5);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    display: none;
    font-family: arial, sans-serif;
    font-size: 14px;
    overflow: hidden;
    position: fixed;
    z-index: 10000;
}
#modal_mask {
    background:#000000;
    bottom: 0;
    display: none;
    left:0;
    opacity: 0.5;
    position:fixed;
    right: 0;
    top:0;
    z-index:9000;
}
.modal_head {
    background: rgb(247, 247, 247);
    background: -moz-linear-gradient(top, rgb(247, 247, 247) 0%, rgb(188, 188, 188) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(247, 247, 247)), color-stop(100%, rgb(188, 188, 188)));
    background: -webkit-linear-gradient(top, rgb(247, 247, 247) 0%, rgb(188, 188, 188) 100%);
    background: -o-linear-gradient(top, rgb(247, 247, 247) 0%, rgb(188, 188, 188) 100%);
    background: -ms-linear-gradient(top, rgb(247, 247, 247) 0%, rgb(188, 188, 188) 100%);
    background: linear-gradient(to bottom, rgb(247, 247, 247) 0%, rgb(188, 188, 188) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#bcbcbc', GradientType=0);
    border-bottom: 1px solid #999999;
    display: block;
    line-height: 18px;
    position: relative;
}
.modal_head .modal_title {
    display: block;
    padding: 5px 28px 5px 10px;
}
.modal_head .modal_closed {
    background: #ffffff;
    border: 1px solid #7F7F7F;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color: #7F7F7F;
    cursor: pointer;
    font-size: 20px;
    font-weight: 700;
    line-height: 18px;
    position: absolute;
    right: 3px;
    text-align: center;
   ...

JavaScript

var modals = {
    form: 'любая Форма или ещё что нибудь имеющее стандарт частого применения',
    error: 'сообщение об ошибке',
    good: 'сообщение об удачном выполнении'
};

$(document).on('click', '[data-modal]', function () {
    $('#modal, #modal_mask').remove();
    var m = $(this).data('modal'),
        t = $(this).data('modal_title'),
        c = 'По умолчанию можно выводить ошибку';
    //c - переменная в которую передаём контент или определять тип информации для модального окна по переменной 'm' и вставляем заготовленные данные
    if (modals[m]) {
        c = modals[m];
    }
    modal(t, c);

});

function modal(t, c) {
    var winH = $(window).height(),
        winW = $(window).width();

    $('body').append('<div id="modal">\
							<div class="modal_head">\
								<div class="modal_title">' + t + '</div>\
								<div class="modal_closed" data-modal_closed="closed">x</div>\
							</div>\
							<div class="modal_content">' + c + '</div>\
						</div>\
						<div id="modal_mask" data-modal_closed="closed"></div>\
					');

    $('body').css('overflow', 'hidden');
    $('#modal').css('top', winH / 2 - $('#modal').height() / 2);
    $('#modal').css('left', winW / 2 - $('#modal').width() / 2);
    $('#modal, #modal_mask').fadeIn();

}

$(document).on('click', '[data-modal_closed]', function () {
    $('body').css('overflow', '');
    $('#modal, #modal_mask').fadeOut();

    setTimeout(function () {
        $('#modal, #modal_mask').remove();
    }, 400);

});