Thursday, February 02, 2012

How to open and auto close JQuery UI Dialog box on click of Hyperlink or Anchor Tag

In this article i will be explaining, How to open and auto close and change content of JQuery UI Dialog box on click of Hyperlink or Anchor Tag.

I have assumed that you have already created VS.Net Web Project and add JQuery UI reference into your web project.  If you need help in adding JQuery UI into asp.net website, then please read my post on how to add JQuery UI into asp.net website

Create a asp.net content page and add following code
<a id="hlOpenMe" runat="server" href="#">Click Me to Open and auto close Dialog Box</a>
<br />
<b>Please wait for 5 Seconds and JQuery UI Dialog box will auto close.</b>
<br /><br />
<div id="dialog" title="My Dialog Title">
    <p>This is My Dialog box Description/Content</p>    
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>


<script type="text/javascript">
    $(document).ready(function () {
        $("#dialog").dialog({ autoOpen: false });


        $("#<%=hlOpenMe.ClientID%>").click(
            function () {
                $("#dialog").dialog('open');


                //Change content on the fly
                ChangeMessage("Welcome to JQueryUI Dialog Box Example");


                //Auto Close JQueryUI Dialog Box
                AutoCloseDialogBox(5000);
                return false;
            }
        );


        function ChangeMessage(Message) {            
            $("#dialog").html(Message);
        }


        function AutoCloseDialogBox(WaitSeconds) {
            //Auto Close Dialog Box after few seconds
            setTimeout(
                function () {
                    $("#dialog").dialog("close");
                }, WaitSeconds);
        }
    });
</script>


Understanding above code
1) I have declared a simple asp.net hyperlink control (Since it has runat="server" it is asp.net control)
2) setTimeOut javascript function will cause dealy, this helps us to close JQuery UI dialog box after few seconds.
Syntax: setTimeout("javascript function declaration",milliseconds);
Example:
   setTimeout(
                function () {
                    $("#dialog").dialog("close");
                }, 5000);

Above line will cause a delay 5 seconds and then auto close dialog box.

Watch out Live Demo

For More on JQuery Tutorials

No comments:

Most Recent Post

Subscribe Blog via Email

Enter your email address:



Disclaimers:We have tried hard to provide accurate information, as a user, you agree that you bear sole responsibility for your own decisions to use any programs, documents, source code, tips, articles or any other information provided on this Blog.
Page copy protected against web site content infringement by Copyscape