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

Add a Close Button
CHAPTER 7 ■ ENHANCING THE USER INTERFACE WITH JQUERY
As it stands right now, the only way to get rid of the modal window after clicking an event title is to
reload the page. Of course, this isn’t good enough, so you need to add a Close button.
To accomplish this, you need to create a new link and bind a click event handler to it that removes
the modal window from the DOM. To give it a traditional Close button feel, use the multiplication
symbol as its content (and the CSS in ajax.css adds the word "close" in front of it). Also, add an href
attribute to make sure hovering over the link causes the mouse to behave as though the button is
clickable.
Next, add a Close button by inserting the following bold code into init.js:
// Pulls up events in a modal window
$("li>a").live("click", function(event){
// Stops the link from loading view.php
event.preventDefault();
// Adds an "active" class to the link
$(this).addClass("active");
// Gets the query string from the link href
var data = $(this)
.attr("href")
.replace(/.+?\?(.*)$/, "$1"),
// Checks if the modal window exists and
// selects it, or creates a new one
modal = fx.initModal();
// Creates a button to close the window
$("")
.attr("href", "#")
.addClass("modal-close-btn")
.html("×")
.click(function(event){
// Prevent the default action
event.preventDefault();
// Removes modal window
$(".modal-window")
.remove();
})
.appendTo(modal);
// Loads the event data from the DB
$.ajax({
type: "POST",
url: processFile,
data: "action=event_view&" + data,
success: function(data){
// Alert event data for now
253