JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="popup active">
  <div class="box"></div>
</div>
<button id="click">show</button>

CSS

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
div.box {
  width: 200px;
  height: 100%;
  position: absolute;
  background: red;
}
div.popup.active {
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  background: rgba(0,0,0,0.3);
}
div.popup {
  display: none;
}

JavaScript

var a = document.querySelector('.popup')
document.addEventListener('click',function(e){
	if(a.classList.contains('active') && e.target.classList.contains('active')){
  	a.classList.remove('active')
  }
})
var b = document.querySelector('#click');
b.addEventListener('click',popup)
function popup(){
	a.classList.add('active')
}