• Choose a category
• All
• Classic-Fiction

By Root 1140 0

It’s quite an intrusion—people tend to dislike popups, so they should only be used if the interaction is essential. Our client informs us it’s essential that users agree to an End User License Agreement (EULA) to use the StarTrackr! application. Not all modal dialogs are as disagreeable as our StarTrackr! EULA, however, so they’re a useful control to learn to build.

What you might notice from the figure is that a modal dialog looks strikingly like a lightbox. It’s a lightbox with some buttons! To supply the contents of a dialog, we’ll embed the HTML in a hidden div. When we want to show it, we’ll copy the contents into the dialog structure and fade it in. That way we can have multiple dialogs that use the same lightbox elements:

chapter_07/17_simple_modal_dialog/index.html (excerpt)

You’ll see that we’ve included a couple of button links in the bottom of the dialog. These are where we can hook in our events to process the user interaction. It’s a fairly simple HTML base so, as you can imagine, CSS plays a big part in how effective the dialogs look. We want to stretch our structure and lightbox “blanket” over the entire screen. The modal dialog will appear to sit on top of it:

chapter_07/17_simple_modal_dialog/dialog.css (excerpt)

#overlay {

display:none;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin-right: auto;

margin-left: auto;

position: fixed;

width: 100%;

z-index: 100;

}

#blanket {

background-color: #000000;

top: 0;

bottom: 0;

left: 0;

display: block;

opacity: 0.8;

position: absolute;

width: 100%;

}

.dialog {

display: none;

margin: 100px auto;

position: relative;

width: 500px;

padding: 40px;

background: white;

-moz-border-radius: 10px;

}

Now to bring the dialog onscreen. We’ll create an openDialog function that will be responsible for taking the dialog HTML, transporting it to the overlay structure and displaying it. The “transporting” part is achieved via the clone action, which creates a copy of the current jQuery selection, leaving the original in place. When we close the dialog we’re going to remove the contents, so unless we cloned it each time, we’d only be able to open it once:

chapter_07/17_simple_modal_dialog/script.js (excerpt)

function openDialog(selector) {

$(selector)

.clone()

.show()

.appendTo('#overlay')

.parent()

.fadeIn('fast');

}

Because we’ve added the behavior to a function, we can call it whenever we need to open a dialog, and pass it the selector of the element we want to show:

chapter_07/17_simple_modal_dialog/script.js (excerpt)

$("#eulaOpen").click(function() {

openDialog("#eula");

});

The second part is returning everything back to its initial state when the dialog is closed. This is achieved by finding the overlay, fading it out, and then removing the cloned dialog contents:

chapter_07/17_simple_modal_dialog/script.js (excerpt)

function closeDialog(selector) {

$(selector)

.parents("#overlay")

.fadeOut('fast', function() {

$(this)

.find(".dialog")

.remove();

});

}

We need to call the closeDialog function from within the current dialog. But as well as closing it, the buttons in a dialog should have other effects. By adding extra buttons in the dialog’s HTML, and hooking on to them in the document-ready part of your code, you can run any arbitrary number of event handlers and process them as you need:

chapter_07/17_simple_modal_dialog/script.js (excerpt)

$('#eula')

.find('.ok, .cancel')

.live('click', function() {

closeDialog(this);

})

.end()

.find('.ok')

.live('click', function() {

// Clicked Agree!

})

.end()

.find('.cancel')

.live('click', function() {

// Clicked disagree!

});

The important part of this code is that we’re using the live action. When we use clone to duplicate a DOM node, its event handlers get lost in the process—but live keeps