JSFiddle - React, Tailwind, and code Playground

by Eric Howe

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<div class="wrapper">
    <button>open dialog</button>
</div>
<div id="dialog" title="Dialog">
    This is a dialog, try to close it.
</div>
<div id="confirm" title="Confirm">
    Really close it?
</div>

CSS

.wrapper {
    padding: 10px;
}
#dialog, #confirm {
    display: none;
}

JavaScript

$("#dialog").dialog({
    autoOpen: false,
    beforeclose: function(e, ui) {
        var $dlg = $(this);
        if($dlg.data('can-close')) {
            $dlg.removeData('can-close');
            return true;
        }
        $("#confirm").dialog({
            width: 500,
            modal: true,
            buttons: {
                Confirm: function() {
                    $(this).dialog('close');
                    $dlg.data('can-close', true);
                    $dlg.dialog('close');
                },
                Cancel: function() {
                    $(this).dialog('close');
                }
            }
        });
        return false;
    }
});

$('button').click(function() {
    $('#dialog').dialog('open');
});