JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/excite-bike/jquery-ui.css">
<button id="item">Hello, click me.</button>
<p>Based on 
    <a href="http://stackoverflow.com/questions/13758928/jquery-deferred-and-dialog-box/18474005#18474005">http://stackoverflow.com/questions/13758928/jquery-deferred-and-dialog-box/18474005#18474005</a></p>
<p>I changed the boolean parsing in onclick()</p>
<p style="font-size:smaller;font-style:italic;">Hope this helps someone. Cheryl Qualset</p>

CSS

#item:hover {
    cursor: pointer;
}

JavaScript

function confirmation(question) {
    var defer = $.Deferred();
    $('<div></div>')
        .html(question)
        .dialog({
            autoOpen: true,
            modal: true,
            title: 'Confirmation',
            buttons: {
                "Yes": function () {
                    defer.resolve("true");//this text 'true' can be anything. But for this usage, it should be true or false.
                    $(this).dialog("close");
                },
                "No": function () {
                    defer.resolve("false");//this text 'false' can be anything. But for this usage, it should be true or false.
                    $(this).dialog("close");
                }
            },
            close: function () {
                //$(this).remove();
                $(this).dialog('destroy').remove()
            }
        });
    return defer.promise();
};

function onclick(){
    var question = "Do you want to start a war?";
    confirmation(question).then(function (answer) {
        console.log(answer);
        var ansbool = (String(answer) == "true");
        if(ansbool){
            alert("this is obviously " + ansbool);//TRUE
        } else {
            alert("and then there is " + ansbool);//FALSE
        }
    });
}

$("#item").on('click', onclick);