JSFiddle - React, Tailwind, and code Playground

by danieljsinclair

HTML

<div id="dlg">
    <div>This is simulates your dialog</div>
    <div class="buttons">
        <span>[OK]</span><span>[cancel]</span>
    </div>
  </div>

CSS

#dlg {
    width:30%;
    padding-bottom:15%;
    background-color:#888;
    position:relative;
}
#dlg .buttons {
    position:absolute;
    bottom:0%;
    right:0%;
    float:right;
}

JavaScript

(function(theDlg){ // module
  theDlg.onclick = (function(e) {
    // cancel event bubbling
    e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation();
  });
    
  document.addEventListener('click', (function(e) {
      theDlg.style.display = "none";
  }), false);

})(document.getElementById('dlg'));