Web Development with jQuery (2015)
Part II. jQuery UI
Chapter 17. 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>
<meta http-equiv='content-type'
content='application/xhtml+xml; charset=utf-8' />
<meta http-equiv='content-language' content='en-us' />
<title>Dialog Plugin</title>
<script src='../jQuery.js'></script>
<script src='../jQueryUI.js'></script>
<script src='Example 17-1.js'></script>
<link href='Example 17-1.css' rel='stylesheet' />
</head>
<body>
<div id='exampleDialog' title='Lorem Ipsum'>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In
sagittis commodo ipsum. Donec est. Mauris eget arcu. Suspendisse
tincidunt aliquam velit. Maecenas libero. Aliquam dapibus
tincidunt eros. Donec suscipit tincidunt odio. Maecenas congue
tortor non ligula. Phasellus vel elit. Suspendisse potenti. Nunc
odio quam, hendrerit ac, imperdiet sit amet, venenatis sed, enim.
</p>
</div>
</body>
</html>
The following style sheet is applied to the preceding markup document:
body {
font: 12px "Lucida Grande", Arial, sans-serif;
background: #fff;
color: rgb(50, 50, 50);
}
In the following script, you see how the <div> element with an id name exampleDialog is made into a dialog by selecting that <div> element and then calling the dialog() method:
$(document).ready(
function()
{
$('div#exampleDialog').dialog();
}
);
In Figure 17.1, you can see that the dialog doesn't look like much out-of-the-box. The title of the dialog is set by placing the title in the title attribute of the element that you want to transform into a dialog. The title of the dialog may also be set by passing a titleoption to the dialog() method; either method of setting the title can be used. If both methods are used, the title option to the dialog() method will be used.
NOTE Lipsum text can be copied and pasted from www.lipsum.com.
Figure 17.1
Styling a Dialog
Before you can learn how to style a dialog, you need to see how it is constructed and assembled in markup. The following markup is the basic structure used for a typical jQuery UI dialog after the dialog() method has finished modifying the document:
<!DOCTYPE HTML>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='content-type'
content='application/xhtml+xml; charset=utf-8' />
<meta http-equiv='content-language' content='en-us' />
<title>Dialog Plugin</title>
<script src='../jQuery.js'></script>
<script src='../jQueryUI.js'></script>
<link href='Example 17-2.css' rel='stylesheet' />
</head>
<body>
<div class="ui-dialog
ui-widget
ui-widget-content
ui-corner-all
ui-front
ui-draggable
ui-resizable"
tabindex="-1"
role="dialog"
aria-describedby="exampleDialog"
aria-labelledby="ui-id-1">
<div class="ui-dialog-titlebar
ui-widget-header
ui-corner-all
ui-helper-clearfix">
<span id="ui-id-1" class="ui-dialog-title">
Lorem Ipsum
</span>
<button type="button"
class="ui-button
ui-widget
ui-state-default
ui-corner-all
ui-button-icon-only
ui-dialog-titlebar-close"
role="button"
aria-disabled="false"
title="close">
<span class="ui-button-icon-primary
ui-icon
ui-icon-closethick"></span>
<span class="ui-button-text">close</span>
</button>
</div>
<div id="exampleDialog" class="ui-dialog-content ui-widget-content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In
sagittis commodo ipsum. Donec est. Mauris eget arcu.
Suspendisse tincidunt aliquam velit. Maecenas libero.
Aliquam dapibus tincidunt eros. Donec suscipit tincidunt
odio. Maecenas congue tortor non ligula. Phasellus vel elit.
Suspendisse potenti. Nunc odio quam, hendrerit ac, imperdiet
sit amet, venenatis sed, enim.
</p>
</div>
<div class="ui-resizable-handle
ui-resizable-n">
</div>
<div class="ui-resizable-handle
ui-resizable-e">
</div>
<div class="ui-resizable-handle
ui-resizable-s">
</div>
<div class="ui-resizable-handle
ui-resizable-w">
</div>
<div class="ui-resizable-handle
ui-resizable-se
ui-icon
ui-icon-gripsmall-diagonal-se">
</div>
<div class="ui-resizable-handle
ui-resizable-sw">
</div>
<div class="ui-resizable-handle
ui-resizable-ne">
<div class="ui-resizable-handle
ui-resizable-nw">
</div>
</div>
</body>
</html>
The preceding markup can be accessed in this book's source code download materials in the Example 17-2.html file.
As you can see in the preceding markup, the dialog() method adds a title bar, resize handles, and a <button> element for closing the dialog. The dialog can also be moved by dragging the dialog from the title bar, as well as resized from its edges (after the resize handles have been positioned in place).
Like the Datepicker in Chapter 16, “Datepicker,” you can style a jQuery UI Dialog either by applying a jQuery UI theme style sheet provided from the jQuery UI website or by manually styling the dialog markup. In Example 17-3, you do just that:
<!DOCTYPE HTML>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='content-type'
content='application/xhtml+xml; charset=utf-8' />
<meta http-equiv='content-language' content='en-us' />
<title>Dialog Plugin</title>
<script src='../jQuery.js'></script>
<script src='../jQueryUI.js'></script>
<script src='Example 17-3.js'></script>
<link href='Example 17-3.css' rel='stylesheet' />
</head>
<body>
<div id='exampleDialog' title='Lorem Ipsum'>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In
sagittis commodo ipsum. Donec est. Mauris eget arcu. Suspendisse
tincidunt aliquam velit. Maecenas libero. Aliquam dapibus
tincidunt eros. Donec suscipit tincidunt odio. Maecenas congue
tortor non ligula. Phasellus vel elit. Suspendisse potenti. Nunc
odio quam, hendrerit ac, imperdiet sit amet, venenatis sed, enim.
</p>
</div>
</body>
</html>
The preceding markup document is saved as Example 17-3.html and is styled with the following style sheet, Example 17-3.css:
body {
font: 12px "Lucida Grande", Arial, sans-serif;
background: #fff;
color: rgb(50, 50, 50);
}
div.ui-dialog {
box-shadow: 0 7px 100px rgba(0, 0, 0, 0.6);
border-radius: 4px;
outline: none;
position: fixed;
z-index: 1000;
background: #fff;
}
div.ui-dialog-titlebar {
height: 23px;
background: url('images/Titlebar Right.png')
no-repeat
top right,
url('images/Titlebar Left.png')
no-repeat
top left;
position: relative;
z-index: 10;
}
span.ui-dialog-title {
display: block;
font-size: 13px;
text-align: center;
margin: 0 9px;
padding: 4px 0 0 0;
height: 19px;
background: url('images/Titlebar.png')
repeat-x
top;
position: relative;
z-index: 10;
}
div.ui-dialog-container {
background: #fff
url('images/Titlebar Left.png')
no-repeat
top left;
}
button.ui-dialog-titlebar-close {
position: absolute;
width: 14px;
height: 15px;
top: 5px;
left: 10px;
border: none;
background: url('images/Close Off.png')
no-repeat
top left;
z-index: 10;
}
button.ui-dialog-titlebar-close:hover {
background: url('images/Close On.png')
no-repeat
top left;
}
button.ui-dialog-titlebar-close span {
display: none;
}
button.ui-dialog-titlebar-close:focus {
border: none;
outline: none;
}
div.ui-dialog-content {
padding: 10px;
}
div.ui-resizable-handle {
border: none;
position: absolute;
z-index: 1;
}
div.ui-resizable-nw {
width: 10px;
height: 10px;
top: -10px;
left: -10px;
cursor: nw-resize;
}
div.ui-resizable-n {
height: 10px;
top: -10px;
left: 0;
right: 0;
cursor: n-resize;
}
div.ui-resizable-ne {
width: 10px;
height: 10px;
top: -10px;
right: -10px;
cursor: ne-resize;
}
div.ui-resizable-w {
width: 10px;
left: -10px;
top: 0;
bottom: 0;
cursor: w-resize;
}
div.ui-resizable-e{
width: 10px;
right: -10px;
top: 0;
bottom: 0;
cursor: e-resize;
}
div.ui-resizable-sw {
width: 10px;
height: 10px;
bottom: -10px;
left: -10px;
cursor: sw-resize;
}
div.ui-resizable-s {
height: 10px;
bottom: -10px;
left: 0;
right: 0;
cursor: s-resize;
}
div.ui-resizable-se {
width: 10px;
height: 10px;
bottom: -10px;
right: -10px;
cursor: se-resize;
}
The preceding style sheet and XHTML are joined with the following JavaScript, Example 17-3.js:
$(document).ready(
function()
{
$('div#exampleDialog').dialog({
title : "Example Dialog"
});
}
);
The preceding styles the jQuery UI Dialog similar to a Mac OS X application window, as shown in Figure 17.2.
In the preceding example, you learned how to apply styling to the jQuery UI Dialog plugin, which is inspired by the look of application windows found on Mac OS X.
The example referred to in Figure 17.2 works great in every modern browser, but there is no drop shadow in older versions of IE, which cannot render the box-shadow property.
Figure 17.2
Making a Modal Dialog
A modal dialog is a dialog that upon activation prevents interaction with the document until the dialog is closed. Example 17-4 demonstrates how to make a jQuery UI Dialog with modal 'margin-bottom:0cm;margin-bottom:.0001pt;line-height: normal;vertical-align:baseline'><!DOCTYPE HTML>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='content-type'
content='application/xhtml+xml; charset=utf-8' />
<meta http-equiv='content-language' content='en-us' />
<title>Dialog Plugin</title>
<scriptsrc='../jQuery.js'></script>
<script src='../jQueryUI.js'></script>
<script src='Example 17-4.js'></script>
<link href='Example 17-4.css' rel='stylesheet' />
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In
sagittis commodo ipsum. Donec est. Mauris eget arcu. Suspendisse
tincidunt aliquam velit. Maecenas libero. Aliquam dapibus
tincidunt eros. Donec suscipit tincidunt odio. Maecenas congue
tortor non ligula. Phasellus vel elit. Suspendisse potenti. Nunc
odio quam, hendrerit ac, imperdiet sit amet, venenatis sed, enim.
</p>
<div id='exampleDialog' title='Lorem Ipsum'>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In
sagittis commodo ipsum. Donec est. Mauris eget arcu. Suspendisse
tincidunt aliquam velit. Maecenas libero. Aliquam dapibus
tincidunt eros. Donec suscipit tincidunt odio. Maecenas congue
tortor non ligula. Phasellus vel elit. Suspendisse potenti. Nunc
odio quam, hendrerit ac, imperdiet sit amet, venenatis sed, enim.
</p>
</div>
</body>
</html>
The CSS rule for div.ui-widget-overlay is added to the style sheet that you created in Example 17-3; this file is available in the source materials as Example 17-4.css:
body {
font: 12px "Lucida Grande", Arial, sans-serif;
background: #fff;
color: rgb(50, 50, 50);
}
div.ui-widget-overlay {
background: rgba(255, 255, 255, 0.7);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
div.ui-dialog {
box-shadow: 0 7px 100px rgba(0, 0, 0, 0.6);
border-radius: 4px;
outline: none;
position: fixed;
z-index: 1000;
background: #fff;
}
div.ui-dialog-titlebar {
height: 23px;
background: url('images/Titlebar Right.png')
no-repeat
Then the JavaScript file applies the modal option to create a modal dialog:
$(document).ready(
function()
{
$('div#exampleDialog').dialog({
title : 'Example Dialog',
modal : true
});
}
);
In the preceding script, you turn on the modal option by setting it to true. When you set the modal option to true along with the application of the div.ui-widget-overlay CSS rule, you disable interaction with background content while the dialog is open. Interaction with background content is disabled because the <div> element with the ui-widget-overlay class name is added dynamically to the document when the modal option is enabled. This element then blocks access to background content because it is positioned to take up the entire window and is positioned in front of background content, but behind the open dialog.
Figure 17.3 shows that the background is draped in a semitransparent white background to indicate that it is disabled.
Figure 17.3
Auto-Opening the Dialog
By default, upon calling the dialog() method, the dialog is automatically opened. This behavior can be controlled by setting the autoOpen option to false. When the autoOpen option is set to false, you can programmatically open a dialog by calling the dialog() method with the string 'open' in its first argument or dialog('open'). Likewise, dialog('close') can be used to close the dialog.
Example 17-5 demonstrates the autoOpen option:
<!DOCTYPE HTML>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='content-type'
content='application/xhtml+xml; charset=utf-8' />
<meta http-equiv='content-language' content='en-us' />
<title>Dialog Plugin</title>
<script src='../jQuery.js'></script>
<script src='../jQueryUI.js'></script>
<script src='Example 17-5.js'></script>
<link href='Example 17-5.css' rel='stylesheet' />
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In
sagittis commodo ipsum. Donec est. Mauris eget arcu. Suspendisse
tincidunt aliquam velit. Maecenas libero. Aliquam dapibus
tincidunt eros. Donec suscipit tincidunt odio. Maecenas congue
tortor non ligula. Phasellus vel elit. Suspendisse potenti. Nunc
odio quam, hendrerit ac, imperdiet sit amet, venenatis sed, enim.
</p>
<input type='submit' id='exampleDialogOpen' value='Open Dialog' />
<div id='exampleDialog' title='Lorem Ipsum'>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In
sagittis commodo ipsum. Donec est. Mauris eget arcu. Suspendisse
tincidunt aliquam velit. Maecenas libero. Aliquam dapibus
tincidunt eros. Donec suscipit tincidunt odio. Maecenas congue
tortor non ligula. Phasellus vel elit. Suspendisse potenti. Nunc
odio quam, hendrerit ac, imperdiet sit amet, venenatis sed, enim.
</p>
</div>
</body>
</html>
The CSS document from Example 17-4 is applied to the preceding markup document, along with the following script:
$(document).ready(
function()
{
$('div#exampleDialog').dialog({
title : 'Example Dialog',
modal : true,
autoOpen : false
});
$('input#exampleDialogOpen').click(
function(event)
{
event.preventDefault();
$('div#exampleDialog')
.dialog('open');
}
);
}
);
In the preceding script, you prevent the dialog from being opened automatically by setting the autoOpen option to false. To open the dialog, you attach a click event to the <input> element, and when that event takes place, you make a call to$('div#exampleDialogOpen').dialog('open') to open the dialog programmatically. Figure 17.4 displays the preceding example.
Figure 17.4
Controlling Dynamic Interaction
By default, the jQuery UI Dialog plugin enables you to resize and drag the dialog window. Both types of dynamic interaction with a dialog can be disabled by passing options to the dialog() method. For example, the draggable option can be set to false to disable dragging the dialog, and the resizable option can also be set to false to disable resizing a dialog. Disabling these options is demonstrated in the following script, Example 17-6:
$(document).ready(
function()
{
$('div#exampleDialog').dialog({
title : 'Example Dialog',
modal : true,
autoOpen : false,
resizable : false,
draggable : false
});
$('input#exampleDialogOpen').click(
function(event)
{
event.preventDefault();
$('div#exampleDialog')
.dialog('open');
}
);
}
);
Animating the Dialog
Opening or closing a dialog can also be animated using one of the effects listed in Appendix M, “Effects.” Animation can be introduced by providing an effect to the show option.
The following script, Example 17-7, demonstrates how to do this:
$(document).ready(
function()
{
$('div#exampleDialog').dialog({
title : 'Example Dialog',
modal : true,
autoOpen : false,
resizable : true,
draggable : true,
show : 'explode'
});
$('input#exampleDialogOpen').click(
function(event)
{
event.preventDefault();
$('div#exampleDialog')
.dialog('open');
}
);
}
);
The preceding script applies an animation upon opening the dialog using the jQuery explode effect. Figure 17.5 captures the explode effect mid-animation.
Figure 17.5
Appendix P, “Dialog,” provides a complete list of options that can be provided to the show option.
Working with Dialog Events
The Dialog plugin supports a variety of events. You can set up events that are executed when the dialog is opened, when the dialog is focused, when the dialog is resized, when the dialog is dragged, or when the dialog is closed. The following document, Example 17-8, demonstrates attaching close and open events to the dialog, but a full list of events is available in Appendix P:
$(document).ready(
function()
{
$('div#exampleDialog').dialog({
title : 'Example Dialog',
modal : true,
autoOpen : false,
resizable : true,
draggable : true,
show : 'explode',
close : function(event, ui)
{
alert('Dialog Closed');
},
open : function(event, ui)
{
alert('Dialog Opened');
}
});
$('input#exampleDialogOpen').click(
function(event)
{
event.preventDefault();
$('div#exampleDialog')
.dialog('open');
}
);
}
);
The preceding script demonstrates the attachment of the close and open options to the dialog, which causes a callback function to be executed when the dialog is opened or closed. The callback function is executed within the context of the dialog element it is attached to, making that element available in the this keyword, as shown in Figure 17.6.
Figure 17.6
Summary
In this chapter, you learned how to implement a dialog using the jQuery UI Dialog plugin. The Dialog plugin doesn't come with much styling, so you learned how the markup is structured and implemented your own styling for a dialog. An alternative and easier way of styling a dialog is to also download and apply a jQuery UI theme from the www.jqueryui.com website.
You learned how to make a modal dialog using the modal option: You can use the modal option to prevent interaction with the document in the background when the requisite CSS is added to the style sheet.
You learned how to disable automatically opening a dialog using the autoOpen option. After automatically opening a dialog has been disabled, you can programmatically open a dialog by calling dialog('open') or close a dialog by calling dialog('close').
You can disable resizing a dialog or dragging a dialog using the resizable and draggable options.
You can animate opening and closing a dialog by providing an effect (documented in Appendix P) to the show option.
Finally, there are a variety of events associated with a dialog that you can attach callback functions to. You saw an example of the close event, but a full list of options is in Appendix P.
Exercises
1. What option would you use to disable interaction with the document while a dialog is open?
2. How do you disable automatically opening a dialog?
3. How do you open a dialog when automatically opening the dialog is disabled?
4. How do you close a dialog?
5. How do you disable resizing and dragging a dialog?
6. What option would you use to animate opening or closing a dialog?