JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<div class="lorem">Lorem ipsum</div>
<div class="dialog">Well hello!</div>

JavaScript

$('.dialog').dialog({
    title: "Hello World",
    buttons: {
        "Ok": function() {
          console.log('ok');
          $('.dialog').dialog('destroy');
        },
        "Cancel": function() {
          console.log('cancel');
          $('.dialog').dialog('destroy');            
        }
    }
});

$(document).on("click", function(e) {
    var clickedOnDialog = $(e.srcElement)
         .closest(".ui-widget.ui-dialog") // these classes are fixed
         .children(".ui-dialog-content") // this as well
         .is(".dialog"); // this is your own class

    if (!clickedOnDialog) {
        $('.dialog').dialog('destroy');
    }
});