Make jQuery Facebox dialog modal

The jQuery Facebox lightbox can be closed by clicking the close button, clicking anywhere outside the dialog or using the escape key. This post shows how to make the dialog modal so that the only way to close it is by clicking the close button. You could alternatively add a link etc into the content of the dialog which would close it, link to another page etc.

Download Facebox

Download the Facebox plugin and associated files from http://defunkt.io/facebox/
Download jQuery from http://jquery.com/
See my basic example for using Facebox.

Making Facebox modal

There are two places in the facebox.js file which need to be dealt with to make the box model:

1) In the loading function which assigns the key down handler to deal with the escape key being pressed.

2) In the showOverlay function when a click handler is added to the overlay that appears over the content of the page and behind the facebox.

Fortunately due to the hooks available with Facebox we don’t need to hack the facebox.js file to modify this behavior. Simply add the following code into your main Javascript file:

$(document).bind('loading.facebox', function() {
    $(document).unbind('keydown.facebox');
    $('#facebox_overlay').unbind('click');
});

This is called after the loading window is displayed, but before the rest of the content starts to get loaded. Line 2 in the above code prevents the escape key from closing the dialog, and line 3 removes the click handler from the overlay.

Now the only way to close the Facebox dialog is by clicking the close button, or some other link you include within the dialog.