Traditionally, the way to display a brief message or ask a visitor a question would’ve been to use one of JavaScript’s native dialog boxes (such as alert or confirm) or to open a new web page with a predefined size, styled to look like a dialog box.
Unfortunately, as I’m sure you’re aware, neither of these methods is particularly flexible to us as developers, or particularly engaging for our visitors. For each problem they solve, several new problems are usually introduced.
The dialog widget lets us display a message, supplemental content (such as images or text), or even interactive content (like forms). It’s also easy to add buttons, such as simple ok and cancel buttons to the dialog and define callback functions for them in order to react to their being clicked.
The following screenshot shows a dialog widget and the different elements that it is made of:
A basic dialog
A dialog has a lot of default behavior built-in, but few methods are needed to control it programmatically, making this an easy to use widget that is also highly configurable and powerful.
Generating the widget is simple and requires a minimal underlying markup structure. The following page contains the minimum markup that’s required to implement the dialog widget:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="development-bundle/ themes/smoothness/ui.all.css"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jQuery UI Dialog Example 1</title> </head> <body> <div id="myDialog" title="This is the title!">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Aenean sollicitudin. Sed interdum pulvinar justo. Nam iaculis volutpat ligula. Integer vitae felis quis diam laoreet ullamcorper. Etiam tincidunt est vitae est.</div> <script type="text/javascript" src="development-bundle/jquery-1.3.2.js"></script> <script type="text/javascript" src="development-bundle/ui/ui.core.js"></script> <script type="text/javascript" src="development-bundle/ui/ui.dialog.js"></script> <script type="text/javascript">
$(function(){
$(“#myDialog”).dialog();
});
</script>
</body>
</html>
Save this file as dialog1.html in the jqueryui project folder. To use the dialog, the following dependencies are required:
- ui.all.css
- jquery-1.3.2.js
- ui.core.js
- ui.dialog.js
The dialog widget is initialized in the same way as the other widgets we have already looked at—by calling the widget’s plugin method. When you run this page in your browser, you should see the default dialog widget as shown in the screenshot at the start of this article.
As with the previous widgets we’ve covered, a variety of class names from the CSS framework are added to different elements within the widget to give them the appropriate styling for their respective elements, and any additional elements that are required are created on the fly. The following screenshot show these classes and the structure of the widget as interpreted by Firebug:
The dialog in the first example is fixed both in size and position, and will remain in the center of the viewport until it is closed. We can make the widget draggable, or resizable, or both easily. All we need to do is include the draggable and resizable component’s source files with the other < script> resources at the end of the < body>.
It’s not important that the draggable and resizable files are included in the page before the dialog’s source file, they can come before or after and the widget will still inherit these behaviors. Any styling that is required, such as the resize indicator that appears in the bottom-left of the dialog, will be picked up automatically from the master CSS file.
Add the following two < script> elements directly before the closing < /body> tag in dialog1.html:
<script type="text/javascript" src="development-bundle/ui/ui.draggable.js"></script> <script type="text/javascript" src="development-bundle/ui/ui.resizable.js"></script>
Save this as dialog2.html and view it in a browser. The dialog should now be draggable and can be moved to any part of the viewport, but will not cause it to scroll if the widget is moved to an edge.
The dialog should also be resizable—by clicking and holding the resize indicator the widget can be made bigger or smaller. If the dialog is made bigger than the viewport then it will cause the window to scroll.
