JSFiddle - React, Tailwind, and code Playground
HTML
<div id="popup_container">
<div id="popup">
Popup
</div>
</div>
CSS
#popup_container {
background: rgba(200,200,200,0.6);
width: 100vh;
height: 100vh;
position: fixed;
display: flex;
justify-content: center;
align-items: center;
}
#popup {
background: yellow;
border: 1px solid black;
position: absolute;
width: 50%;
height: 50%;
display: flex;
justify-content: center;
align-items: center;
}
JavaScript
var $container = $("#popup_container");
$container.click(function(e) {
if (e.target.id == $container.attr("id")) {
$(this).hide();
}
});