The jQuery UI Dialog Widget is a simple widget used to
display information, it is similar to a message box, but decorated with additional
themes and effects.
In order to use the jQuery UI library, we need to
download the jQuery UI library and add a references to the appropriate files it
in our web site.
To know more about installing the jQuery UI library
refer to the post What is jQuery UI ?.
Once the jQuery UI files are in place, add references
to the jQuery UI .js and .css files as follows.
<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"
/>
Now we are ready to use the jQuery UI features in out
page.
Add the below code to the .aspx page.
Add the below code to the .aspx page.
<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"
/>
<script type="text/javascript">
$(document).ready(function()
{
$('#cmdShowDialog').click(function()
{
$('#myDialog').dialog();
});
$('#cmdHideDialog').click(function()
{
$('#myDialog').dialog('close');
});
});
</script>
</head>
<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>
</html>
Run the application, click on the Show Dialog button,
the Dialog will get displayed as follows.
Click on the Hide Dialog button to close the Dialog box.
No comments:
Post a Comment