Prevent Lightbox from closing when clicking on the backdrop – Lity

I’ve been using Lity for years now and falling in love with its lightweight accessible and responsive in place. If you only need a simple lightbox with common functionalities then this plugin is for you. This plugin helps you build beautiful lightboxes without any Javascript knowledge requirement.

When it comes to custom functionalities, you will need to understand JavaScript or jQuery which is the backbone of this plugin.

In my case, I need to prevent the lightbox from closing when people click on the perimeter outside of the lightbox itself, or to simply put, to click on the backdrop.

To do this, we need to do a quick hack via jQuery codes below:

var $ = jQuery;
$(document).ready(() => {
     if ( $( '.popup' ).length ) {    
        var progLity = lity('.popup');
        progLity.options('esc', false);
        progLity.opener();
        const lityWrap = document.querySelector('.lity-wrap');
        if ( lityWrap ) {
            lityWrap.removeAttribute('data-lity-close');
        }
    }
});