JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<button id="popup">pop</button>
<div id="front">
    <div class="box">
        <h1>fwefwe</h1>
    </div>
</div>

CSS

#front {
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 9999;
    background: purple;
    opacity: 0.6;
    top: 0;
    left: 0;
    display: none;
}
#front.active {
    display: block;
}
#front .box {
    width: 500px;
    height: 500px;
    background: black;
}
button#popup {
    position: fixed; 
    z-index: 9999999999999999
}

JavaScript

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