JSFiddle - React, Tailwind, and code Playground

by hrsetyono

HTML

<div id="main-wrapper">
  <button id="toggle-modal">Toggle Modal</button>
  
  <article class="modal">
    <h1>Hello World</h1>
    <p>Lorem ipsum dolor sit amet</p>
  </article>
</div>

CSS

.modal {
  visibility: hidden;
  opacity: 0;

  position: fixed;
  z-index: 100;
  bottom: 0;
  left: 0;
  right: 0;
  
  background-color: red;
  color: white;
  width: 300px;
  margin: 0 auto;
  padding: 10px;

  transition: all .3s ease-in-out;
  transform: translateY(30%);
}

 .modal-active .modal {
  visibility: visible;
  opacity: 1;

  transform: translateY(0);
}

JavaScript

$(document).ready(function() {
  
  // open modal by clicking button
  $("#toggle-modal").on("click", function(e) {
  	$("#main-wrapper").toggleClass("modal-active");
  });
  
  // close modal if click elsewhere
  $(".modal").on("click", function(e) { e.stopPropagation(); });
  
});