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, we can add our own custom buttons to the Dialog. Here
we shall see on how to create a Confirmation dialog.
To know more about the basics of jQuery UI
Dialog refer to the post Asp.Net jQuery UI Dialog Widget.
<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
(
{
buttons:
[
{
text: "Yes",
click: confirm
},
{
text: "No",
click: cancel
}
]
}
);
});
$('#cmdHideDialog').click(function() {
$('#myDialog').dialog('close');
});
});
</script>
<body>
<div id="myDialog" style="display:none;" title="Hello
Dialog">
Are
you sure, you want to Save <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>
Run the application, click on the Show
Dialog button, the Dialog will get displayed as follows.
Note that the Dialog has Yes/No buttons, asking the users for a confirmation to proceed, the Yes/No button clicks are handled and mapped to functions confirm/cancel to process further.
Related Posts
No comments:
Post a Comment