JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css">
<form id="cancel" method="post" action="/">
<input class="submitbtn" type="submit" value="Go">
</form>
<div id="dialog" title="Form submission">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 0 0;"></span>Are you sure?</p>
</div>
CSS
#dialog { display:none;}
JavaScript
$("#dialog").dialog({
resizable: false,
autoOpen: false,
modal: true,
buttons: {
"Yes": function() {
$('#cancel').unbind("submit.mine").submit();
$(this).dialog("close");
},
"No": function() {
$(this).dialog("close");
}
}
});
$('#cancel').bind("submit.mine", function(event) {
event.preventDefault();
targetform = this;
$('#dialog').dialog('open');
});