JSFiddle - React, Tailwind, and code Playground

by Denis Ineshin

HTML

<div id="popup"></div>

CSS

html, body {
    height: 100%;
    margin: 0;
    background: #333;
}

#popup {
    position: fixed;
    top: 50%; left: 50%;
    width: 200px; height: 200px;
    margin: -100px 0 0 -100px;
    background: #fff;
    border-radius: 10px;
}

JavaScript

var $body = $(document.body),
    $popup = $("#popup");

// закрываем попап при клике на любую область экрана
$body.on("mousedown", function () {
    $popup.remove();
});

// клик по самому попапу не должен его закрывать
$popup.on("mousedown", function (e) {
    e.stopPropagation();
});