JSFiddle - React, Tailwind, and code Playground

by Kishore Sahasranaman

HTML

<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div id="dialogBox"></div>

JavaScript

$('#dialogBox').dialog({
                title: "Test",
                width: 'auto',
                position: "center",
                resizable: false,
                modal: true,
                autoOpen: false,
                open: function (args) {
                    $(this).parent().zIndex(50);
                    $(document).find(".ui-widget-overlay.ui-front").last().zIndex(40);
                },
                buttons: {
                    OK: {
                        text: "OK",
                        icons: {
                            primary: "ui-icon-check"
                        },
                        "class": "dialog-button",
                        click: function () {
                           $(this).dialog("close");
                           // do something
                        }
                    },
                    Cancel: {
                        text: "Cancel",
                        icons: {
                            primary: "ui-icon-close"
                        },
                        "class": "dialog-button",
                        click: function () {
                           $(this).dialog("close");
                        }
                    }
                },
                close: function (event, ui) {
                   $(this).dialog("close");
                }
         });

$('#dialogBox').dialog("open");