Close Lightbox Form when clicking outside the form

Site URL: https://endive-denim-89ds.squarespace.com/contact

Hi all! 👋

After some intensive research on the forum and on the web, I am looking for a way to close the popup Lightbox form (when you select any of the "Pitch" "Ask" "Join" button...) by clicking outside the form (like, in the background for example).

Right now, the Lightbox form can only be closed by clicking on the X button, but I notice that people always try first to click on the background (away from the Lightbox) to close it, and I'd love to make this available to them too. Would someone know how to do that?

Thank you so much!

This works perfectly!!! Thank you @bangank36, you're a gem 🙂

On 11/3/2020 at 8:28 AM, bangank36 said:

<script>
	document.addEventListener('DOMContentLoaded', function() {
    	document.addEventListener("click", function(e) {
            var element = e.target;
            if (element.classList.contains('lightbox-inner')) {
                element.querySelector(".lightbox-close").click();
            }   
        });
    });

</script>

Place this snippet in custom code injection, detail here

Hello, I was wondering if there's a way for this code to be adapted for gallery image lightboxes? as in, click away from the lightbox image to close the lightbox, as opposed to having to click the "x"?

1 hour ago, oliviadsquare said:

Hello, I was wondering if there's a way for this code to be adapted for gallery image lightboxes? as in, click away from the lightbox image to close the lightbox, as opposed to having to click the "x"?

What is your site url, each template has different markup

2 minutes ago, bangank36 said:

What is your site url, each template has different markup

is it okay that my site isn't live yet?  https://www.oliviaduchess.com/

Do I need to publish it first? I'm so sorry if that's a silly question, I'm new here 

There's also this link, I'm not sure if it works https://flugelhorn-duck-pdgm.squarespace.com/config/pages

8 hours ago, oliviadsquare said:

is it okay that my site isn't live yet?  https://www.oliviaduchess.com/

Do I need to publish it first? I'm so sorry if that's a silly question, I'm new here 

There's also this link, I'm not sure if it works https://flugelhorn-duck-pdgm.squarespace.com/config/pages

You may need to enable site wide password

On 11/3/2020 at 12:28 AM, bangank36 said:

<script>
	document.addEventListener('DOMContentLoaded', function() {
    	document.addEventListener("click", function(e) {
            var element = e.target;
            if (element.classList.contains('lightbox-inner')) {
                element.querySelector(".lightbox-close").click();
            }   
        });
    });

</script>

Place this snippet in custom code injection, detail here

I would like to apply this sort of feature to my Mobile Menu forced on desktop. As in, this menu opens on the right side and I'd like to be able to exit by clicking outside. What code could I use to close the menu when user clicks outside of the menu / over the main body, without using the 'x'?

site: https://tjr-new-site.squarespace.com/portfolio/
pw: troytroy

Thx!

Just now, taylorroy said:

I would like to apply this sort of feature to my Mobile Menu forced on desktop. As in, this menu opens on the right side and I'd like to be able to exit by clicking outside. What code could I use to close the menu when user clicks outside of the menu / over the main body, without using the 'x'?

site: https://tjr-new-site.squarespace.com/portfolio/
pw: troytroy

Thx!

this one?

@bangank36 yep!

On 10/6/2021 at 12:15 PM, taylorroy said:

@bangank36 yep!

try add this code injection, footer

<script>
const overlayCls = 'is-mobile-overlay-active';
document.addEventListener('mousedown',(e) => {
    if (!(e.target.closest(".Mobile-overlay") || e.target.matches(".Mobile-overlay")) || 
    (e.target.matches('.Mobile-overlay-close') || e.target.matches('.Mobile-overlay-close')) {
      if(document.body.classList.contains(overlayCls)) {
        document.querySelector('.Mobile-bar-menu').click();
      }
    }
    
    return true;
})
  </script>

@bangank36 Actually, sorry, the page links in the menu are no longer clickable. Is it possible that this script is causing that error, overriding the menu function?

Potentially could be a conflict with other code on my site, but thought you might have insight.

site: https://tjr-new-site.squarespace.com/portfolio/
pw: troytroy

1 hour ago, taylorroy said:

@bangank36 Actually, sorry, the page links in the menu are no longer clickable. Is it possible that this script is causing that error, overriding the menu function?

Potentially could be a conflict with other code on my site, but thought you might have insight.

site: https://tjr-new-site.squarespace.com/portfolio/
pw: troytroy

Oops, let me check later in the day

On 10/7/2021 at 12:21 PM, taylorroy said:

@bangank36 Actually, sorry, the page links in the menu are no longer clickable. Is it possible that this script is causing that error, overriding the menu function?

Potentially could be a conflict with other code on my site, but thought you might have insight.

site: https://tjr-new-site.squarespace.com/portfolio/
pw: troytroy

update the code, kindly update accordingly

19 hours ago, bangank36 said:

kindly update accordingly

Updated, works great now. Thanks so much for your help.

On 4/17/2021 at 7:43 AM, oliviadsquare said:

Hello, I was wondering if there's a way for this code to be adapted for gallery image lightboxes? as in, click away from the lightbox image to close the lightbox, as opposed to having to click the "x"?

On 4/17/2021 at 6:14 PM, bangank36 said:

You may need to enable site wide password

Hi, I have a very similar question to the one above. I have been trying to add functionality to my website where you can click off expanded videos in the gallery by clicking in the surrounding background area as opposed to the small "x" in the top right corner. If I could get some help that would be amazing! Thanks! 

site:  https://smallgiraffes.com/