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]()
Demo
Downloads
