JSFiddle - React, Tailwind, and code Playground

by Aravind Baskaran

HTML

<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<button id="showDialog">Show</button>
<button id="normalClose">Normal close</button>
<button id="forceClose">Force close</button>
<div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

JavaScript

$(function () {
    $("#dialog").dialog({
        buttons: [{
            text: "OK",
            click: function () {
                $(this).dialog("close");
            }
        }],
        beforeClose: function (evt) {
            console.log("Before Close");
        },
        close: function () {
            console.log("Close");
        }
    });

    $("#showDialog").click(function () {
        $("#dialog").dialog("open");
    });
    $("#normalClose").click(function () {
        console.log("Calls beforeClose event, cancellable");
        $("#dialog").dialog("close");
    });
    $("#forceClose").click(function () {
        console.log("Should not call beforeClose event, not cancellable");
        $("#dialog").dialog("close", null, true);
    });
});