Chapter 4. Dialog Boxes

Dialog boxes are interesting solutions for presenting information on an HTML page. You can use dialog boxes, for example, to pose a question to the user. HTML dialog boxes have the traditional behavior of other application dialog boxes—you can move, resize, and of course, close them.

Basic Principles of Dialog Boxes

Suppose we want to write the HTML code to display the dialog box shown in Figure 4-1.

An HTML dialog box

Figure 4-1. An HTML dialog box

This dialog box includes text content and a title bar that contains a close button. Users can move the box on the page and resize it. jQuery UI requires us to use the following conventions:

  • A global <div> block surrounds the whole with a title attribute that specifies the window title.

  • The <div> content includes the content of the window.

<!DOCTYPE html>
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>

<link rel=stylesheet type=text/css
      href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />

<div id="dialog" title="Window title">
  <p> Content of the dialog box </p>
</div>

<script>

$("#dialog").dialog();

</script>

The dialog () method transforms the HTML code written on the page into HTML code to display a dialog box.

Notice the <! DOCTYPE html> header in HTML. If this statement is not present, window management is done poorly in Internet Explorer.

To display multiple dialog boxes simultaneously, as shown in Figure 4-2, we include the following (shown in bold):

<!DOCTYPE html>
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>

<link rel=stylesheet type=text/css
      href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />

<div id="dialog1" title="Window title 1">
  <p> Content of the dialog box 1</p>
</div>

<div id="dialog2" title="Window title 2">
  <p> Content of the dialog box 2</p>
</div>

<script>

$("#dialog1, #dialog2").dialog();

</script>
Dialog boxes displayed simultaneously

Figure 4-2. Dialog boxes displayed simultaneously

The dialog () method uses each element of the list corresponding to the selector (in this case, the two <div> elements) and displays the corresponding dialog boxes. They are stacked at first, and users can move and position them simply by clicking or dragging them.

Get jQuery UI now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.