Dialog
This chapter presents how to work with the jQuery UI Dialog plugin, which provides pseudo-
pop-up windows created using markup, CSS, and JavaScript.Unlike pop-up windows, which require that you open a new document in a separate browser
window that is increasingly saddled with security limitations, such as being unable to hide the
URL of the document and being unable to hide the status bar at the bottom of the window,
dialogs created using markup, CSS, and JavaScript can be styled in any way that you like and
can impose any limitations that you like. For example, you have the ability to make a modal
dialog, which provides a dialog and prevents the user from continuing to interact with the
document until the dialog is closed.Another difference between pop-up windows and dialogs (as I will now refer to this widget
for the remainder of this chapter—without reiterating the fact that they are generated by
markup, CSS, and JavaScript) is that dialogs cannot leave the browser window in which
they reside. So a dialog cannot be minimized to your operating system’s taskbar, although
you could possibly create your own minimization script so that the dialog can be minimized
within the browser window.As with many of the things that you learned in this book, jQuery UI again leaves little to be
desired in its implementation of dialogs.Implementing a Dialog
As with every other jQuery UI plugin, this discussion of the Dialog plugin begins with a
demonstration of what the plugin does in its default state. Example 17-1 demonstrates the
out-of-the-box implementation:<!DOCTYPE HTML>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>