JSFiddle - React, Tailwind, and code Playground

HTML

<a class="btn-delete confirm-action left" href="?action=delete&amp;id=320" title="Delete">Delete</a>

<div id="dialog-answer"></div>

<div style="display:none;" id="confirm-action-dialog" title="Confirm Action?"><p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Are you sure you want to continue?</p></div>

CSS

.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 11px; }
.ui-widget .ui-widget { font-size: 10px; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 11px; }
.ui-widget-content { border: 1px solid #dddddd; background: transparent; color: #333333; }
.ui-dialog {background:#EEE;}
.ui-dialog .ui-dialog-content {padding:10px;}
.ui-dialog .ui-dialog-titlebar {border: 1px solid #654A7D;background: #654A7D;color:#fff;padding:5px;-moz-border-radius-bottomright: 0;-webkit-border-bottom-right-radius: 0;-khtml-border-bottom-right-radius: 0;border-bottom-right-radius: 0;}
.ui-widget-content a { color: #333333; }
.ui-widget-header { border: 1px solid #e78f08; background: #f6a828; color: #ffffff; font-weight: bold; }
.ui-widget-header a { color: #ffffff; }
.ui-widget-header .ui-icon-closethick {float:right;}
.ui-dialog-buttonpane {padding: 10px; text-align: right;}

button {border: none;background: none;margin:0 0 0 10px;cursor:pointer;outline:none;}
button:hover {background:#654A7D;color:#fff;}
button .ui-button-text {font-size:12px;}

.ui-widget-overlay {background: #666666; opacity:.50;filter:Alpha(Opacity=50);position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.ui-widget-shadow { margin: -5px 0 0 -5px; padding: 5px; background: #000000; opacity: .20;filter:Alpha(Opacity=20); -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }

JavaScript

$("#dialog:ui-dialog").dialog("destroy");

$('.confirm-action').live('click', function(e) {
    $self = $(this);

    if (e && e.stopPropagation && $self.data('confirmed') !== true) {
        e.stopPropagation();

        $('#confirm-action-dialog').dialog({
            height: 110,
            modal: true,
            resizable: false,
            draggable: false,
            buttons: {
                'Yes': function() {
                    $(this).dialog('close');
                    $self.data('confirmed', true);
                    $('#dialog-answer').html('You clicked Yes');
                },
                'No': function() {
                    $self.data('confirmed', false);
                    $(this).dialog('close');
                    $('#dialog-answer').html('You clicked No');
                }
            }
        });
    } else if ($self.data('confirmed') === true) {
        e = window.event;
        e.cancelBubble = false;
    }

    return false;
});