JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#dialog" name="modal">Вызов модального окна</a>


<!-- Само окно -->
<div id="boxes">  
<div id="dialog" class="window"> Текст модального окна
<div class="top"><a href="#" class="link close"/>Закрыть</a></div>
<div class="content"><div class="voscon2"><a href="" id="voscon2">кнопка</a></div></div>
</div>
</div>


<!-- Маска, затемняющая фон -->
<div id="mask"></div>
<div id="mask"></div>

CSS

body {
    font-family:verdana;
    font-size:15px;
    }  

    .link {color:#fff; text-decoration:none}
    .link:hover {color:#fff; text-decoration:underline}  

#mask {
    position:absolute;
    left:0;
    top:0;
    z-index:9000;
    background-color:#000;
    display:none;
    }

#boxes .window {
    position:absolute;
    left:0;
    top:0px;
    -top: 40px;
    width:440px;
    height:200px;
    display:none;
    z-index:9999;
    padding: 20px;
    overflow: hidden;
    }  

#boxes #dialog {
    width:375px; 
    height:203px;
    padding:10px;
    background-color:#ffffff;
    }  

.top {
    position:absolute;
    left:0;
    top:0;
    width:370px;
    height:30px;
    background: #53bfb2;
    padding: 8px 20px 6px 10px;
    }

.close {
    float:right;
    }

.content {
    padding-top: 35px;

JavaScript

$(document).ready(function() {   
    $('a[name=modal]').click(function(e) {
    e.preventDefault();
    var id = $(this).attr('href');
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();
    $('#mask').css({'width':maskWidth,'height':maskHeight});
    $('#mask').fadeIn(1000); 
    $('#mask').fadeTo("slow",0.8); 
    var winH = $(window).height();
    var winW = $(window).width();
    $(id).css('top',  winH/2-$(id).height()/2);
    $(id).css('left', winW/2-$(id).width()/2);
    $(id).fadeIn(2000); 
    });
    $('.window .close').click(function (e) { 
    e.preventDefault();
    $('#mask, .window').hide();
    }); 
    $('#mask').click(function () {
    $(this).hide();
    $('.window').hide();
    }); 
   });