In this article I will explain with an example, how to Open (Show) jQuery UI Dialog Modal Popup box on Button Click.
The jQuery UI Dialog Modal Popup box will be shown (opened) on Button Click using the jQuery Dialog “open” command.
Open (Show) jQuery UI Dialog Modal Popup on Button Click
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
![Open (Show) jQuery UI Dialog Modal Popup on Button Click]()
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
