Wednesday, June 27, 2012

Asp.net jQuery Dialog with fading effect


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" >
<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>


Search Flipkart Products:
Flipkart.com

No comments: