Prevent the LightBox from closing when clicking outside of it

When someone clicks outside of the lightbox area, it is closed by default, this can cause a lot of frustration to a visitor, if you are thinking of opening a series of pages inside a lightbox. After the Lightbox disappearance the visitor is required to start the whole process back from the scratch. The following short tutorial describes how you can disable the closing of the lightbox window when someone clicks outside the lightbox area. After the changes a visitor will only be able to close the lightbox by clicking the close button or by pressing the escape key on the keyboard.
The guide refers to the lightbox_me script (version 2.3). Lightbox_me is an essential tool for the jQuery developer’s toolbox. Feed it a DOM element wrapped in a jQuery object and it will lightbox it for you, no muss no fuss. Lightbox_me handles all of those annoying edge cases that other lightbox solutions do not, you can take a look at the full feature list on the official project page.

The Project page suggests that you can just set the “closeClick” variable to false in order to prevent the lightbox from closing when the visitor clicks outside of it. This change causes some unwanted side-effects, it also disables the click on the close button…
In order to prevent the closing of the lightbox only when someone clicks outside of it, you should just edit the JavaScript source code that is executed when the “overlay” object is clicked. The part of the source that I am referring to, can be found in line 97 (for version 2.3 of the lightbox_me script):

$overlay.click(function(e) { closeLightbox(); e.preventDefault; });

You should change the above line to:

$overlay.click(function(e) { e.preventDefault; });

This change will disable the closing of the lightbox when someone clicks outside of it. You can find the complete lightbox_me library script with the changes implemented here.

Panagiotis

Written By

Panagiotis (pronounced Panayotis) is a passionate G(r)eek with experience in digital analytics projects and website implementation. Fan of clear and effective processes, automation of tasks and problem-solving technical hacks. Hands-on experience with projects ranging from small to enterprise-level companies, starting from the communication with the customers and ending with the transformation of business requirements to the final deliverable.