JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/south-street/jquery-ui.css">
<body>
</body>
JavaScript
var message = "Please provide Phone number."
var phoneNum = "<input type='text' id='phoneNum' name='phoneNum'/> ";
var dialogHtml = "<div id='confirmPhoneNumber'>" + message + phoneNum + "<div id='dialogError' style='display:none'>Phone number field cannot be empty</div>" + "</div>";
$('body').append(dialogHtml);
$("#confirmPhoneNumber").css("font-size", "70%");
$("#confirmPhoneNumber").dialog({
autoOpen: true,
resizable: false,
modal: true,
title: 'Save Phone',
buttons: {
'Save': function() {
// Phone number must be provided
if ($("#phoneNum").val().trim().length == 0) {
$("#dialogError").show();
} else {
alert('Got a number');
}
},
'Cancel': function() {
$(this).dialog('close');
}
}
});