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.
To align the buttons in the jQuery UI
Dialog, add the following style tags to the Asp.Net page.
<style type="text/css">
.ui-dialog
.ui-dialog-buttonpane
{
text-align:
left;
}
.ui-dialog
.ui-dialog-buttonpane .ui-dialog-buttonset
{
float: none;
}
</style>
Full Example
<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 buttons in the Dialog are left aligned instead of the default right alignment.
No comments:
Post a Comment