In this article I will explain a basic tutorial with example, how to use and display jQuery UI Dialog Modal Popup Window (Box) on your web page.
The jQuery UI Dialog Modal Popup box will be shown on Button Click.
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
![jQuery UI Dialog Modal Popup Window (Box) Tutorial with 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
