JSFiddle - React, Tailwind, and code Playground

by salman

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css">
<div>
    <a id="dialog1" href="#">dialog 1</a>
    <a id="dialog2" href="#">dialog 2</a>
</div>
<p title="Dialog title">Hello World without title</p>
<p title="Dialog title">Hello World with title</p>

CSS

body {
    font: 12px sans-serif;
}

JavaScript

$(function() {
    //
    // autoOpen disabled for demonstration
    //
    $("p").dialog({
        autoOpen: false
    });
    //
    // The first dialog does not show title
    //
    $("p:eq(0)")
        .dialog("widget")
        .find(".ui-dialog-titlebar").css({
            "float": "right",
            border: 0,
            padding: 0
        })
        .find(".ui-dialog-title").css({
            display: "none"
        }).end()
        .find(".ui-dialog-titlebar-close").css({
            top: 0,
            right: 0,
            margin: 0,
            "z-index": 999
        });
    //
    // Manually show the dialog on an event
    //
    $("#dialog1").click(function(e) {
        e.preventDefault();
        $("p:eq(0)").dialog("open");
    });
    $("#dialog2").click(function(e) {
        e.preventDefault();
        $("p:eq(1)").dialog("open");
    });
});