In web applications we need to show popup dialog to show errors or dialog to show message or to show confirmation dailog with ok and cancel button. jQuery UI library provides easy way to show dialog as model or simple dailog. For that we need to add ui js libraries in application.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="development-bundle/jquery-1.7.1.js" type="text/javascript"></script>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<script src="development-bundle/ui/jquery.ui.widget.js" type="text/javascript"></script>
<script src="development-bundle/ui/jquery.ui.dialog.js" type="text/javascript"></script>
<link href="Styles/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />
<title>jQuery Popup</title>
<script type="text/javascript">
$(function () {
// Dialog
$('#dialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function () {
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
// Dialog Link
$('#btnDelete').click(function () {
$('#dialog').dialog('open');
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="dialog" title="Dialog Title">
<p>
Do you want to delete record?</p>
</div>
<input type="button" id="btnDelete" value="Delete" />
</form>
</body>
</html>