JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<button class='open-modal'>
  open modal
</button>
<div class='modal-background'>
</div>
<div class='modal-box close-modal'>
  <div class='content'>
    modal
  </div>
  <div class='vertical-mid-hack'>
  
  </div>
</div>

CSS

.modal-background {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.7;
}
.modal-box {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}
.content {
  display: inline-block;
  vertical-align: middle;
  background-color: white;
  border-radius: 3px;
  padding: 10px;
  margin: 0 -2px;
}
.vertical-mid-hack {
  width: 0;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
  margin: 0 -2px;
}

JavaScript

$(function() {

	$('.open-modal').on('click', function() {
  	$('.modal-background').fadeIn();
    $('.modal-box').fadeIn();
  });
  $('.close-modal').on('click', function() {
  	$('.modal-background').fadeOut();
    $('.modal-box').fadeOut();
  })

});