JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" id="Показать модальное окно" value="show modal window">
<input type="button" id="show-window" value="show window">

 <div id="modal-window-sample" 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!</div>
  <div id='modal-footer' class = "modal-footer">
   <span class='modal-button close-button'>Close me</span>
  </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>
<style>
/* modal-default.css */
.modal-overlay {

 width: 100%;
 height: 100%;
 z-index: 99999;
 background-color: black;
 opacity: .8;
 display: none;
 position: fixed;
 top:0;
 left: 0;

 -webkit-box-shadow: 0 0 15px #fff;
 -moz-box-shadow: 0 0 15px #fff;
  -o-box-shadow: 0 0 15px #fff;
  box-shadow: 0 0 15px #fff;
  
}

.modal-window-animate {

   transition: top .7s ease-in;
   -o-transition: top .7s ease-in;
   -moz-transition: top .7s ease-in;
   -webkit-transition: top .7s...

JavaScript

var show_modal = document.getElementById("show-modal-window");
var show_window = document.getElementById("show-window");

var modal = new ModalJS({
    window: document.getElementById('modal-window-sample'),
     closeButtonCls: "close-button"
});

modal.onopen = function () {
  transitionend(this.window, function () {
    alert("transition ended");
  });
};

modal.onclose = function () {
    // if returned true, modal will close
    return isModal;
}


show_modal.addEventListener("click", function () {
    isModal = true;
    modal.overlay.removeEventListener("click", modalClose);
    modal.show();
});

show_window.addEventListener("click", function () {
    //close window if clicked overlay
    isModal = false;
    modal.show();
});

function modalClose() {
    modal.hide();
}

function transitionend(elem, callback) {
    elem.addEventListener("transitionend", onEnd);
    elem.addEventListener("webkitTransitionEnd", onEnd);
    elem.addEventListener("mozTransitionEnd", onEnd);
    elem.addEventListener("msTransitionEnd", onEnd);

    function onEnd(e) {
        callback.apply(this, arguments);
        this.removeEventListener(e.type, onEnd);
    }
};