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.click(function(e) {
    e.stopPropagation(); // cancel event bubbling
  });
    
  $('body').click(function(e) {
      theDlg.hide();
  });

})($("#dlg"));