JSFiddle - React, Tailwind, and code Playground

by guradio

HTML

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href=" http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
<input type='button' id='button' value='Click me to show dialog!'>

JavaScript

$(document).ready(function () {
    var div = $("<div id='dialog'></div>");
    $("body").prepend(div);
    $("#dialog").dialog({
        autoOpen: false,
        resizable: false,
        modal: true,
        height: 400,
        position: ['middle', 20],
        width: 500,
        buttons: {
            Close: {
                class: 'calendareventright',
                text: 'Close',
                click: function () {
                    $(this).dialog('close');
                }
            },
            Add: {
                class: 'calendareventleft',
                text: 'Add',
                click: function () {
                    var title = $("#title").val();
                    var description = $("#description").val();
                    var otherinfor = $("#otherinfo").val();
                    $(this).ajaxcall(title, description, otherinfor);
                }
            },
            Update: {
                class: 'calendareventleft',
                text: 'Update',
                click: function () {
                    alert('Update here');
                }
            },
            Delete: {
                class: 'calendareventleft',
                text: 'Delete',
                click: function () {
                    alert('Delete here');
                }
            }
            //    "No": function () {
            //    $(this).dialog('close');
            //}
        }
    });


    $('#button').click(function () {

        $("#dialog").dialog({
            title: "qwe"
        });
        $("#dialog").html("<div>" + "<form>" + "Title:<br>" + "<input type='text' id='title' class='calendarinput'>" + "<br>" + "Description:<br>" + "<textarea id='description' class='calendarinput calendartxtarea'></textarea>" + "<br>" + "Additional Information:<br>" + "<textarea id='otherinfo' class='calendarinput calendartxtarea'></textarea>" + "</form>" + "</div>");
        $("#dialog")
            .dialog("open");


   ...