JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" data-modal-id="modal-window-1" value="окно №1">
<input type="button" data-modal-id="modal-window-2" value="окно №2">
<input type="button" data-modal-id="modal-window-3" value="окно №3">
    
    
 <div id="modal-window-1" class="modal-window" >
  <div id='modal-head' class="modal-head"><h2>Hello</h2></div>
  <div id='modal-body' class="modal-body">I am modal window №1</div>
  <div id='modal-footer' class = "modal-footer">
   <span class='modal-button close-button'>Close me</span>
  </div>
     </div>
     

             
<div id="modal-window-2" class="modal-window" >
    <div id='modal-head' class="modal-head"><h2>Hello</h2></div>
    <div id='modal-body' class="modal-body">I am modal window №2</div>
    <div id='modal-footer' class = "modal-footer">
     <span class='modal-button close-button'>Close me</span>
</div>
    </div>
    
<div id="modal-window-3" class="modal-window" >
    <div id='modal-head' class="modal-head"><h2>Hello</h2></div>
    <div id='modal-body' class="modal-body">I am modal window №3</div>
    <div id='modal-footer' class = "modal-footer">
        <span class='modal-button close-button'>Close me</span>
</div>
</div>

CSS

.modal-window {
  
  display: none;
   width: 300px;
  
   background-color: white;
   z-index: 100000;
   -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #808080;

  margin: 0;
  color: #808080;
  font-size: 13px;
  font-weight: normal;
  line-height: 18px;
  background-color: #FFFFFF;
  border: 1px solid #EAEEFA;
  border: 1px solid rgba(234, 238, 250, 0.6);
 
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
}

.modal-head {
  padding: 5px 15px;
  margin: 0;
}

.modal-head h2 {

  text-align: center;
}


.modal-body {
  padding: 40px;
  font-size: 15px;
  text-align: center;
   border-top: 1px solid #EEEEEE;
  -webkit-border-radius: 0 0 6px 6px;
  -moz-border-radius: 0 0 6px 6px;
  border-radius: 0 0 6px 6px;
  -webkit-box-shadow: inset 0 1px 0 #FFF;
  -moz-box-shadow: inset 0 1px 0 #FFF;
  box-shadow: inset 0 1px 0 #FFF;

}

.modal-footer {
  display: block;
  background-color: #F5F5F5;
  padding: 10px 11px 11px;
  border-top: 1px solid #EEEEEE;
  -webkit-border-radius: 0 0 6px 6px;
  -moz-border-radius: 0 0 6px 6px;
  border-radius: 0 0 6px 6px;
  -webkit-box-shadow: inset 0 1px 0 #FFF;
  -moz-box-shadow: inset 0 1px 0 #FFF;
  box-shadow: inset 0 1px 0 #FFF;
  zoom: 1;
  margin-bottom: 0;
  text-align: center;
  cursor: pointer;
  font-family:arial;
  font-size: 15px;
  
}

</style>

<link href="http://cyberua.github.io/modal/modal-default.css" type="text/css" rel="stylesheet">
<script src="http://cyberua.github.io/modal/modal.min.js"></script>

JavaScript

document.body.addEventListener ( "click", function ( e ) {
    
    var id =  e.target.getAttribute ( "data-modal-id" ),
        _window;
    
    if ( !id )  return;
    
    _window = document.getElementById ( id );
    console.log(_window)
    
    modal.setWindow ( _window ).show();

}, false );