Pro PHP and jQuery by Jason Lengstorf.pdf - Computer Science ...

Fade Out the Modal Window
CHAPTER 7 ■ ENHANCING THE USER INTERFACE WITH JQUERY
First, you need to add effects to fade out the modal window. This function will be triggered in several
ways, some of which also trigger events; to handle this, you create a conditional statement that checks
whether an event was triggered, then prevent the default action if that’s the case.
Next, remove the class active from all links, since none of them are in use when the modal window
isn’t visible.
Finally, you select and fade out the modal window using .fadeOut(). In the callback function of
.fadeOut(), the modal window will be removed from the DOM entirely.
You add this function by inserting the following bold code in the fx object literal:
// Functions to manipulate the modal window
fx = {
// Checks for a modal window and returns it, or
// else creates a new one and returns that
"initModal" : function() {
// If no elements are matched, the length
// property will be 0
if ( $(".modal-window").length==0 )
{
// Creates a div, adds a class, and
// appends it to the body tag
return $("")
.addClass("modal-window")
.appendTo("body");
}
else
{
// Returns the modal window if one
// already exists in the DOM
return $(".modal-window");
}
},
// Fades out the window and removes it from the DOM
"boxout" : function(event) {
// If an event was triggered by the element
// that called this function, prevents the
// default action from firing
if ( event!=undefined )
{
event.preventDefault();
}
// Removes the active class from all links
$("a").removeClass("active");
// Fades out the modal window, then removes
// it from the DOM entirely
$(".modal-window")
255