JSFiddle - React, Tailwind, and code Playground

by tlarson

HTML

<link rel="stylesheet" type="text/css" href=http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css />

<button onclick='$("#publishDialog").dialog("open")'>Open</button>

<div id="publishDialog" title="Publish Report" style="display:none">
    <div>
       <div>Are you sure?</div> 
        <div>
            <input id="allowUpdates" type="checkbox"></input>            
            <div>Allow updates</div>
        </div>        
    </div>
</div>

JavaScript

$("#publishDialog").dialog({
            autoOpen: false,
            closeOnEscape: false,
            width: 400,
            resizable: false,
            modal: true,
            dialogClass: 'no-titlebar',
            hide: {effect: "fade", duration: 500},
            show: {effect: "fade", duration: 500},            
            buttons: {
                "Publish": function() {
                    alert('publish clicked!');
                    $("#publishDialog").dialog("close");
                },
                Cancel: function() {
                    $("#publishDialog").dialog("close");
                }
            }
        });