Tương tác giữa PHP và jQuery - part 27

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 () appends the modal window to the body element without hiding it. To correct this, add a call to .hide() in () 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. | 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 appends the modal window to the body element without hiding it. To correct this add a call to .hide in 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 div .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 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 CHAPTER 7 ENHANCING THE USER INTERFACE WITH JQUERY 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 If an event was triggered by the element that called this function prevents the default action from firing if event undefined Removes the active class from all links a .removeClass active Fades out the modal window and overlay then removes both from the DOM entirely .modal-window .modal-overlay .fadeOut slow function this .remove After making this change reload http localhost and click an event title. The modal window and overlay will fade in and clicking either the .