For this example, I’m using jQuery version 3.2.1. The javascript method popupConfirm() can be called on the click of a button event or onchange event of a drop-down. The no-close class is to remove the x button from top-right of the dialog box.
< link href="../Scripts/jquery-ui.css" rel="stylesheet" />
< script src="../Scripts/jquery.js"></script>
< script src="../Scripts/jquery-ui.js"></script>
< style>
.no-close .ui-dialog-titlebar-close{
display: none;
}
< /style>
<script language="JavaScript">
$(document).ready(function () {
$("#dialog").dialog({
autoOpen: false,
modal: true,
width: 400
});
});
function popupConfirm() {
$("#dialog").dialog({
buttons: {
"Yes": function () {
$("#message").text('You clicked Yes');
$(this).dialog("close");
},
"No": function () {
$("#message").text('You clicked No');
$(this).dialog("close");
}
},
dialogClass: "no-close"
});
$("#dialog").dialog("open");
}
</script>
Use the following html for the dialog and message as below.
< div id="dialog" title="Confirmation Required" >
Are you sure?
< /div >
< div id="message" style="color: red;" >
< /div >
Use onchange method of a drop-down e.g.
< select name = 'types' size='1' onchange='popupConfirm();'> < /select>