JSFiddle - React, Tailwind, and code Playground

by Matt Ball

HTML

<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<button id="clickme">Click me</button>

<div id="dialog-confirm" title="Yes or no?">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Click a button</p>
</div>

CSS

#dialog-confirm {
    display:none;
}

JavaScript

function openModalWindow(callback) {
    if (typeof callback !== 'function') callback = $.noop;
    $("#dialog-confirm").show().dialog({
        resizable: false,
        modal: true,
        buttons: {
            Yes: function() {
                $(this).dialog("close");
                callback(true);
            },
            No: function() {
                $(this).dialog("close");
                callback(false);
            }
        }
    });
}

function f1() {
    return $.Deferred(function(dfd) {
        openModalWindow(dfd.resolve);
    }).promise();
}

$('#clickme').click(function() {
    f1().then(function(result) {
        alert('f1 async returned: ' + result);
    });
});