JSFiddle - React, Tailwind, and code Playground

by robert0310

HTML

<body class="overlay">
  <div >
    <button id="myBtn"> 
      Open Modal
    </button>
  </div>
  
  <div id="myModal">
    <span>Hello World!</span>
  </div>
</body>

CSS

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#myModal {
  display: none;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.25);
  width: 100%;
  height: 100%;
  text-align: center;
}

#myModal span {
  position: fixed;
  top: 50%;
  left: 50%;
  padding: 10px;
  background-color: #a600a6;
  color: #fff;
  transform: translate(-50%, -50%);
}

JavaScript

var modal = document.getElementById('myModal'); // Get the popup
var btn = document.getElementById("myBtn"); // Get the button that opens the popup

btn.onclick = function() { // Open the popup 
    modal.style.display = "block";
}

let eventsArray = ["click","touchstart", "touchend"];

eventsArray.forEach( function(event) { 
    window.addEventListener(event, function(e) {
      if (e.target === modal) {
          modal.style.display = "none";
      }
    }, false);
});