How to open JQuery UI Dialog box on Page Load - AutoOpen

In this article i will be explaining, How to open JQuery UI Dialog box on Page Load - AutoOpen.

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
<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">
    $(function () {
        $("#dialog").dialog();
    });
</script>

Understanding above code.
<div id="dialog" title="My Dialog Title"> - You can be able to change dialog title by editing title.

    <p>This is My Dialog box Description/Content</p> - You can be able to change dialog description/message by editing paragraph tag.  You can write anything which is valid html inside div tag.


    $(function () {
        $("#dialog").dialog(); - Please note in above example, JQuery UI dialog box has ID as "dialog", so we have $("#dialog") and call dialog method to show dialog box.

By default JQuery UI dialog box opens on page load, show we haven't done anything specific to open it on page load.


Preview of code.

You can also show image or any valid html inside JQuery UI dialog box.  Here is the example.

Watch out Live Demo

For More on JQuery Tutorials

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