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 as many buttons as required to the Dialog
and handle their events.
To know more about the basics of jQuery UI
Dialog refer to the post Asp.Net jQuery UI Dialog Widget.
Now let us add a Dialog widget and add an
array of buttons to the 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()
{
$('#cmdShowDialog').click(function()
{
$('#myDialog').dialog
(
{
buttons:
[
{
text: "Ok",
click: function() { $(this).dialog("close");}
},
{
text: "Cancel",
click: function() { $(this).dialog("close");}
}
]
}
);
});
$('#cmdHideDialog').click(function()
{
$('#myDialog').dialog('close');
});
});
</script>
<body>
<div id="myDialog" style="display:none;" title="Hello
Dialog">
This is a test Dialog box, using jQuery <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 Ok and Cancel buttons are added to the Dialog widget.
No comments:
Post a Comment