- Posted by liammclennan on October 29, 2009
This series is going to document increasingly complex usages of the jQuery UI Dialog widget. This first part of the series will demonstrate how to display the default dialog.
Other series members:
jQuery UI Dialog: Part 2 – The Modal Dialog
The jQuery UI Dialog is a powerful client-side dialog control. It is bundled as part of the jQuery UI suite and as such it is available on the Google CDN. Some of its more interesting features are:
- Modal / non-modal dialogs
- Support for resizing and dragging
- Support for buttons
- Support for Theming
- Stacking
- Partially transparent modal overlay layer
The simplest usage of the dialog control is to select a div, and call the dialog() function.
View a Demo
Here is the complete code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Default dialog</title>
<link href="ui-darkness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
</head>
<body>
<p>Some text on the page.</p>
<div class="make_me_a_dialog">Content of div</div>
<script type="text/javascript">
$(document).ready(function() {
$('.make_me_a_dialog').dialog();
});
</script>
</body>
</html>
Note that the two javascript files, jquery.min.js and jquery-ui.min.js, are loaded from the google content delivery network (CDN). Line 19 selects the div with the class 'make_me_a_dialog' and applies the jquery dialog plugin to it.
