JSFiddle - React, Tailwind, and code Playground

by wisegorilla

HTML

<div class="dialog-wrapper">
  <div class="dialog">
    This is my dialog window.<br/> You can close it by clicking outside of dialog.
  </div>
</div>

CSS

.dialog {
  color: white;
  background: black;
  padding: 30px;
  width: 300px;
  margin: 0 auto;
}

JavaScript

var fromDialog = true;

document.addEventListener('mousedown', function(e) {
    var clicked = $(e.target);
    fromDialog = clicked.parents().hasClass("dialog-wrapper");
});

document.addEventListener('mouseup', function(e) {
    if(!fromDialog) {
       $('.dialog-wrapper').hide(500);
    }
});