JSFiddle - React, Tailwind, and code Playground

by sebababi

HTML

<div id="dialog-confirm" title="Basic dialog">Hello, world!</div>
<input type="button" value="test" />
<img src="http://icons.iconarchive.com/icons/dryicons/simplistica/128/delete-icon.png" onClick="jAlert('Confirm deletion!', 'Do you really want to delete this package?');">
    
<table cellspacing="3">
    <thead>
        <tr style="font-weight: bold;">
            <td>Date</td>
            <td>Time</td>
            <td>Seats</td>
            <td></td>
            <td></td>
        </tr>
    </thead>
    <tr>
        <td style="width: 120px;">2008-12-27</td>
        <td style="width: 120px;">15:00 - 16:00</td>
        <td style="width: 100px;">3</td>
        <td style="width: 60px;"><a href="/Booking.aspx/Cancel/10">cancel</a>
        </td>
        <td style="width: 80px;"><a href="/Booking.aspx/Change/10">change</a>
        </td>
    </tr>
</table>

CSS

#dialog-confirm {
    display: none;
}

JavaScript

// WORKS    $("#dialog-confirm").dialog();

// WORKS createDialog('hola','que tal');

// WORKS createDialog('Confirm deletion!', 'Do you really want to delete this packag');

/*
WORKS
createDialog3('Confirm deletion!', 'Do you really want to delete this packag',{
            resizable: false,
        height: 240,
        modal: true,
        buttons: {
            "Confirm": function () {
                $(this).dialog("close");
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }
           });
*/

$('input').click(function () {
    $("#dialog-confirm").dialog();
});

function jAlert(title,text){
    alert(title+'<BR>'+text)
}
function createDialog2(title, text, options) {
    return $("<div class='dialog' title='" + title + "'><p>" + text + "</p></div>")
        .dialog(options);
}

function createDialog3(title, text, options) {
    return $("<div class='dialog' title='" + title + "'><p>" + text + "</p></div>")
    .dialog(options);
}

function createDialog(title, text) {
    alert(title);
    return $("<div class='dialog' title='" + title + "'><p>" + text + "</p></div>")
        .dialog({
        resizable: false,
        height: 240,
        modal: true,
        buttons: {
            "Confirm": function () {
                $(this).dialog("close");
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }
    });
}