JSFiddle - React, Tailwind, and code Playground

by cowdd

HTML

<div id="ex3">
  <h2>Example 3</h2>
  <p></p>
  <h4>results:</h4>
  <button id="overlay-on">Open up the overlay</button>
  <div class="overlay">
    <div class="rela">
      <span><a href="#">X</a></span>
    </div>
    <div id="message">
      <h5>Title</h5>
      <p>Width is:</p>
    </div>
  </div>
</div>

CSS

div.overlay {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background: rgba(40, 0, 77, 0.7);
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  display: none;
}

div.rela {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 101;
}

div.rela span {
  position: absolute;
  top: 0;
  left: 98%;
  font-weight: bold;
  font-size: 36px;
}

div.rela span a {
  color: white;
  text-decoration: none;
  z-index: 152;
}

div#message {
  width: 40%;
  height: 20%;
  background: white;
  text-align: center;
  border: 1px solid black;
  font-weight: bold;
  display: none;
  z-index: 102;
}

div#message h5 {
  font-size: 18px;
}

JavaScript

/* This is for clicking off the overlay */
(function removeOverlay() {
  document.querySelector('div.overlay span a').onclick = function() {
    document.querySelector('div.overlay').style.display = "none";
    console.log('I am closing')
  };

  document.querySelector('div.overlay').addEventListener('click', function() {

    this.style.display = "none";
    console.log('Im closing with overlay');

  });

})();

document.querySelector('button#overlay-on').addEventListener('click', function() {

  var overlay = document.querySelector('div.overlay');
  overlay.style.display = "block";

  var message = document.querySelector('div#message').outerHTML;
  var relative = document.querySelector('div.rela');


  document.getElementById('message').setAttribute('style', 'position:absolute; display:block; top:10%; ');
  var text = document.createTextNode(document.getElementById('message').offsetWidth);
  document.querySelector('div#message p').appendChild(text);
  console.log(message);
  relative.innerHTML = relative.innerHTML + message;


});