JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
        <div class="b" rel="alert1">Открыть окошко1</div>
        <div class="b" rel="alert2">Открыть окошко2</div>
        <div class="b" rel="alert2">Открыть окошко3</div>
        <div class="modal-wrap">
            <div class="modal" rel="alert1">
                <div class="modal-close"> Закрыть окошко</div>
                Первое окошко              
            </div>
            <div class="modal" rel="alert2">
                <div class="modal-close"> Закрыть окошко</div>
                Второе окошко               
            </div>
            <div class="modal" rel="alert3">
                <div class="modal-close"> Закрыть окошко</div>
                Третье окошко               
            </div>
        </div>
    </body>
</html>

CSS

body{
    background: yellow;
}
.b{    
    height: 500px;
}
.modal-wrap{
    display: none;
    height: 100%;
    left: 0;
    overflow: auto;
    padding: 60px 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99999;
}
.modal{
    background: #000;
    color: #fff;
    border: 1px solid #bec6d0;
    left: 50%;
    margin: 0 0 0 -200px;
    position: relative;
    top: 0;
    width: 400px;
    height: 400px;
}
.modal-close{    
    position: absolute;
    right: 0;
    top: 0;
}

JavaScript

$(document).ready(function(){
  $('.b').click(function(){
      var id = $(this).attr('rel');
      var modal = $('.modal[rel=' + id +']');
      modal.parent().show();
      $('.modal').hide();
      modal.show();
      $('body').css('overflow', 'hidden');
  });
    $('.modal-close').click(function(){
        $('body').css('overflow', 'auto');
        $('.modal-wrap').hide();
    });
});