Thursday, February 02, 2012

How to open and close JQuery UI Dialog box on Button Click

In this article i will be explaining, How to open and close JQuery UI Dialog box on Button Click.

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 website, then please read my post on how to add JQuery UI into website

Create a content page and add following code

<asp:Button ID="btnOpenMe" runat="server" Text="Click Me to open Dialog box" />

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

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

            function () {
                return false;

Understanding above code
1) I have declared a simple button 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 button click event, I have wrote code to open JQuery UI dialog box.

            function () {
                return false;

Similarly if you want to close JQuery UI dialog box  change below line with "close" rather than "open"

Watch out Live Demo

For More on JQuery Tutorials

No comments:

Most Recent Post

Community Updates

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