JSFiddle - React, Tailwind, and code Playground

by william

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/smoothness/jquery-ui.css">
<div id="long">
    <button id="openDialog">open dialog</button>
</div>

CSS

#long {
    height: 1000px;
}

#openDialog {
    position: absolute;
    top: 950px;
}

JavaScript

//create or empty a div with id='modalpop' for use as an alert box with jquery-ui.dialog()
function modalpop(msg) {
    var m = $('#modalpop');
    if ($(m).length == 0) {
        m = '<div id="modalpop">' + msg + '</div>';
    } else {
        $(m).text(msg);
    }
    return m;
}

m = modalpop("foo bar"); //make a div to show the dialog, function at bottom
m = $(m).dialog({
    autoOpen: false,
    resizable: false,
    modal: true,
    position: 'center',
    title: 'Conflict with current Provenance',
    buttons: {
        "Continue": function() {
            $(this).dialog('close');
        },
        "Cancel": function() {
            //var $radio = $('input[name="provenance"]');
            //$radio.removeAttr("checked").filter('[value="' + prov_was + '"]').prop("checked", true).click();

            $(this).dialog('close');
        }
    }
});

$('#openDialog').click(function() {
    $(m).dialog('open');
});