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

CHAPTER 7 ■ ENHANCING THE USER INTERFACE WITH JQUERY
You may have noticed that the modal window appears to flicker right as it’s opened. This happens
because fx.initModal() appends the modal window to the body element without hiding it. To correct
this, add a call to .hide() in fx.initModal() using the following bold code:
// 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 $("")
.hide()
.addClass("modal-window")
.appendTo("body");
}
else
{
// Returns the modal window if one
// already exists in the DOM
return $(".modal-window");
}
},
// Adds the window to the markup and fades it in
"boxin" : function(data, modal) {
// Code omitted for brevity
},
// Fades out the window and removes it from the DOM
"boxout" : function(event) {
// Code omitted for brevity
}
Finally, clicking the Close button does not remove the overlay. To fade out and remove the overlay,
simply modify the selector in fx.boxout() to include the class modal-overlay:
// 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() {
// Code omitted for brevity
261