Jump to content

Close Lightbox Form when clicking outside the form

Go to solution Solved by Beyondspace,

Recommended Posts

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!

Edited by TOMweb
Link to comment
  • Solution
<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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 5 months later...
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"?

Edited by oliviadsquare
spelling
Link to comment
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 5 months later...
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!

Link to comment
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?

image.thumb.png.4c094afc220e0851cb9ef50aaf2b3a52.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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>

 

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 4 weeks later...
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/

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.