JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/start/jquery-ui.css">
<div id="your-dialog-id">Your non-modal dialog</div>
<a href="#" id="open">Open dialog</a>

JavaScript

$('#open').click(function() {
    $('#your-dialog-id').dialog('open');
    closedialog = 0;
});

var closedialog;

function overlayclickclose() {
    if (closedialog) {
        $('#your-dialog-id').dialog('close');
    }

    //set to one because click on dialog box sets to zero 
    closedialog = 1;
}

$('#your-dialog-id').dialog({
    autoOpen: false,
    open: function() {
        closedialog = 1;
        $(document).bind('click', overlayclickclose);
    },
    focus: function() {
        closedialog = 0;
    },
    close: function() {
        $(document).unbind('click');
    },
    buttons: {
        Submit: function() {
            $(this).dialog('close');
        }
    }
});