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 id="red"></div>
<button>Gimme' a dialog</button>

CSS

#red {
    background-color: #fee;
}

JavaScript

$('#red').dialog({
    autoOpen: false,
    resizable: false,
    draggable: false,
    height: 600,
    width: 550,
    position: [150, 200],
    open: function(event, ui) {
        var $dialog  = $(event.target);
        var position = $dialog.dialog('option', 'position');
        $dialog.closest('.ui-dialog').css({
            left: position[0],
            top:  position[1]
        });
    }
});
$('button').click(function() { $('#red').dialog('open') });