JSFiddle - React, Tailwind, and code Playground

by Nir Azuelos

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/start/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<div id="dialog" title="Watch me!">
    <p>I'm an animated dialog.</p>
    <p class="status"></p>
</div>
<span id="status"></span>

JavaScript

$("#dialog").dialog({
    show: {
        effect: "drop",
        direction: "up",
        duration: 1000
    },
    hide: {
        effect: "drop",
        direction: "down",
        duration: 1000
    },
    open: function () {
        $(this).parent().promise().done(function () {
            console.log("[#Dialog] Opened");
            $("#status").html("Dialog is Open.");
            $("#dialog .status").html("I'm now open.");
        });
    },
    close: function () {
        $(this).parent().promise().done(function () {
            console.log("[#Dialog] Closed");
            $("#status").html("Dialog is Closed.");
        });
    }
});