The jQuery UI Dialog Widget is a simple
widget used to display information, it is similar to a message box, but we can customize
the Dialog as required, here we shall see on how to create a Modal dialog using
jQuery. A modal dialog, disables all the controls in the form and makes sure
that the user selects one of the options in the Dialog to proceed further.
To know more about the basics of jQuery UI
Dialog refer to the post Asp.Net jQuery UI Dialog Widget.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Dialog</title>
<script type="text/javascript" src="JavaScript/jquery-1.7.2.js"></script>
<script type="text/javascript" src="JavaScript/jquery-ui-1.8.21.custom.min.js"></script>
<link type="text/css" href="css/smoothness/jquery-ui-1.8.21.custom.css"
rel="Stylesheet"
/>
<style type="text/css">
.ui-dialog
.ui-dialog-buttonpane
{
text-align:
left;
}
.ui-dialog
.ui-dialog-buttonpane .ui-dialog-buttonset
{
float:
none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var
confirm = function() { alert('Yes Button Clicked'); }
var
cancel = function() { alert('No Button Clicked'); }
$('#cmdShowDialog').click(function() {
$('#myDialog').dialog
(
{
modal: true,
close: function(event, ui){alert('Dialog Closed');},
buttons:
[
{
text: "Yes",
click:
confirm
},
{
text: "No",
click:
cancel
}
]
}
);
});
$('#cmdHideDialog').click(function() {
$('#myDialog').dialog('close');
});
});
</script>
</head>
<body>
<div id="myDialog" style="display:none;" title="Hello
Dialog">
Please Select Yes/No to Proceed. <br /><br
/>
</div>
<form id="frmDialog" runat="server">
<div>
<input type="button"
id="cmdShowDialog"
value="Show Dialog" />
<input type="button"
id="cmdHideDialog"
value="Hide Dialog" />
</div>
</form>
</body>
</html>
Run the application, click on the Show
Dialog button, the Dialog will get displayed as follows.
Note that all other controls in the form are disabled, the user has to select one of the options in the Dialog Yes/No.
The
line modal: true, sets the Dialog to a Modal dialog.
The line close: function(event,
ui){alert('Dialog Closed');}, defined what should be done when the dialog is closed.
No comments:
Post a Comment