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

In this article i will be explaining, How to open and close 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


Click Me to Open Dialog Box

   

This is My Dialog box Description/Content

   

This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.

Understanding above code
1) I have declared a simple asp.net hyperlink control (Since it has runat="server" it is asp.net control)
2) $("#dialog").dialog({ autoOpen: false });  - By default dialog box will open on page load, this line will explicitly disallow dialog box to open on page load.
3) Inside hyperlink click event, I have wrote code to open JQuery UI dialog box.
        $("#<%=hlOpenMe.ClientID%>").click(
            function () {
                $("#dialog").dialog('open');
                return false;
            }
        );

Similarly if you want to close JQuery UI dialog box  change below line with "close" rather than "open"
                $("#dialog").dialog('close');

Watch out Live Demo

For More on JQuery Tutorials

• JQuery Tutorial for Beginners
• JQuery UI Tutorial for asp.net developers