JSFiddle - React, Tailwind, and code Playground

by salman

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/le-frog/jquery-ui.css">
<div id="div1" title="Dialog 1: Default behavior">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div id="div2" title="Dialog 2: No close button">Pellentesque vulputate auctor augue, nec posuere odio pretium vel.</div>
<div id="div3" title="Dialog 3: No close button" style="display: none;">Donec ut justo urna, ut pellentesque sem. Cras nisl neque, faucibus fermentum consectetur vitae, dapibus eget odio.</div>

<input type="button" id="button1" value="Dialog 1">
<input type="button" id="button2" value="Dialog 2"> 
<input type="button" id="button3" value="Dialog 3">

JavaScript

$(function() {
    // Demo 1
    $("#div1").dialog({
        autoOpen: false
    });
    $("#button1").click(function() {
        $("#div1").dialog("open");
    });
    // Demo 2
    $("#div2").dialog({
        autoOpen: false
    });
    $("#div2").dialog("widget").find(".ui-dialog-titlebar-close").hide();
    $("#button2").click(function() {
        $("#div2").dialog("open");
    });
    // Demo 3
    $("#button3").click(function() {
        $("#div3").dialog({
            open: function() {
                $(this).parent().find(".ui-dialog-titlebar-close").hide();
            }
        });
    });
});