JSFiddle - React, Tailwind, and code Playground

by kshep92

HTML

<button id="btn">
Open Dialog
</button>

<div class="dialog">

<div class="dialog-content">
<p>This is the dialog content</p>
<button id="close">
Close
</button>
</div>

</div>

CSS

body, html {
  height: 100%;
  min-height: 100%;
}

.dialog {  
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.4);
  z-index: 1;
}

.dialog-content {
  width: 45%;
  background: #fff;
  padding: 8px;
  margin: 10% auto;
  position: relative;
  animation: slideIn 0.4s;
}

@keyframes slideIn {
  from {transform: translateY(-300px); opacity: 0}
  to {transform: translateY(0); opacity: 1}
}

JavaScript

(function() {
	var open = document.getElementById("btn"),
  dialog = document.getElementsByClassName('dialog')[0],
  close = document.getElementById('close');
  
  console.log(open, dialog, close);
  
  open.onclick = function() {
  	dialog.style.display = 'block';	
  };
  
  close.onclick = function() {
  	dialog.style.display = 'none';
  }
  

})();