In this article I will explain with an example, how to use jQuery UI Dialog Modal Popup box with AutoOpen property set to False.
 
 
jQuery UI Dialog Modal Popup box with AutoOpen property set to False
The following HTML Markup consists of jQuery UI Script and CSS files inherited to use jQuery UI Dialog Modal Popup box, an HTML DIV and a Button.
The jQuery UI Dialog Modal Popup box is initialized inside the jQuery document ready event handler. In order to prevent the jQuery UI Dialog Modal Popup box from automatically opening on Page Load, the autoOpen property is set to false.
Note: The default value of autoOpen property is true.
The Button has been assigned a jQuery Click event handler and when the Button is clicked the jQuery UI Dialog Modal Popup box is shown using the jQuery Dialog “open” command.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
    rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(function () {
        $("#dialog").dialog({
            modal: true,
            autoOpen: false,
            title: "jQuery Dialog",
            width: 300,
            height: 150
        });
        $("#btnShow").click(function () {
            $('#dialog').dialog('open');
        });
    });
</script>
<input type="button" id="btnShow" value="Show Popup" />
<div id="dialog" style="display: none" align = "center">
    This is a jQuery Dialog.
</div>
 
 
Screenshot
jQuery UI Dialog Modal Popup AutoOpen False example
 
 
Browser Compatibility
The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
 
 
Downloads