In the post Open jQuery dialog on aspnet Button click, we have seen on how to
show and hide a jQuery Dialog when an Asp.Net button is clicked, this will just
open the dialog without any effect, how about opening the Dialog with a good
fading effect, we shall on how to set the effect.
The fading effect can be set by setting the show/hide properties while opening the dialog as follows.
$('#myDialog').dialog({
show: "puff", hide: "puff" });
Here is the full example.
<html xmlns="http://www.w3.org/1999/xhtml" >
Here is the full example.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>jQuery
Dialog Fading Effect</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(event)
{
event.preventDefault();
$('#myDialog').dialog({
show: "fade", hide: "fade" });
});
$('#cmdHideDialog').click(function(event)
{
event.preventDefault();
$('#myDialog').dialog('close');
});
});
</script>
</head>
<body>
<form id="frmDialogFading" runat="server">
<div id="myDialog" style="display:none;" title="Fading
Dialog">
This is a Fading Dialog
</div>
<div>
<asp:Button ID="cmdShowDialog" runat="server" Text="Show Dialog" />
<asp:Button ID="cmdHideDialog" runat="server" Text="Hide Dialog" />
</div>
</form>
</body>
</html>
Run the application, click on the Show Dialog button, you
will see that the Dialog opens with a nice fading effect, and the Dialog fades
out on clicking the Hide Dialog button.
Other possible effects which can be applied to the Dialog are
Blind
Clip
Drop
Explode
Fade
Fold
Puff
Slide
Scale
Other possible effects which can be applied to the Dialog are
Blind
Clip
Drop
Explode
Fade
Fold
Puff
Slide
Scale
No comments:
Post a Comment