JSFiddle - React, Tailwind, and code Playground

by Jed Mao

HTML

<div class="modal">
    <div class="modal__overlay"></div>
    <div class="modal__position">
        <div class="modal__content">
            <div class="custom-block">
                Hello, world!
            </div>
        </div>
    </div>
</div>

<button>Show Modal</button>

CSS

/** define modal */

.modal {
    z-index: 2000;
    visibility: hidden;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}

.modal--show {
  visibility: visible;
}

.modal__overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-transition: all 0.3s;
          transition: all 0.3s;
}

.modal--show .modal__overlay {
  opacity: 1;
}

.modal__position {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.modal__content {
  background-color: white;
  opacity: 0;
  -webkit-transform: scale(0.7);
      -ms-transform: scale(0.7);
          transform: scale(0.7);
  -webkit-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.320, 1.275);
          transition: all 0.3s cubic-bezier(0.175, 0.885, 0.320, 1.275);
}

.modal--show .modal__content {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}

.custom-block {
    width: 200px;
    height: 300px;
}

JavaScript

$('button').click(toggle);
$('.modal__overlay').click(toggle);

function toggle() {
    $('.modal').toggleClass('modal--show');
}