• Status: Solved
  • Priority: High
  • Security: Public
  • Views: 36
  • Last Modified:

Closing an absolute positioned lightbox popup when clicking anywhere outside of it

I need to find a way to close a scrollable and absolute positioned lightbox popup when a person clicks anywhere outside of the lightbox:

https://staging.royalpalm.com/property/212-alexander-palm-road/

( just click on the large header image up at the top to trigger the lightbox popup )

You'll notice that you can scroll this lightbox popup vertically, and that you can only close it by scrolling back up to the top and then clicking on the "X" in the upper righthand corner.  Ideally, I'd like to change this by doing either of the following:

1) Make is so that if you click anywhere outside of the lightbox to close it (this is the most preferred method)
2) Add a floating "X" button (that follows you as you scroll), that you can click on to close the lightbox (similar to that "Back to Top" button on the lower right of the page)

How would I accomplish either of these?

- Yvan
0
egoselfaxis
Asked:
egoselfaxis
  • 3
  • 3
1 Solution
 
Julian HansenCommented:
This will respond to click outside as well as pressing any key
jQuery(function() {
  jQuery(document).on('click', function(e) {
    if (!jQuery(e.target).hasClass('popup-trigger') && jQuery('#lightbox-popup-main').hasClass('active')) {
      jQuery('.lightbox-close').trigger('click');
    }
  })
  jQuery(document).on('keyup', function() {
    jQuery('.lightbox-close').trigger('click');
  })
})

Open in new window

you can further refine to making it the escape key
jQuery(document).on('keyup', function(e) {
  if (e.keyCode == 27) {
    jQuery('.lightbox-close').trigger('click');
  }
})

Open in new window

0
 
egoselfaxisAuthor Commented:
The first script that you provided me with won't work in my situation, as the thumbnail images that are in the lightbox are each clickable and are displayed using jQuery's magnify popup.  So what's happening now is that when you spawn the lighbox and then click on any of the thumbnails, the lightbox instantly closes:

https://staging.royalpalm.com/property/1900-royal-palm-way/

I even removed the keyup function from your script thinking that it would alleviate the problem, but unfortunately it doesn't.

Is there any way this script could be adapted to get around this problem somehow?  Ideally, I'd like it so that the only way the lightbox could be closed is by clicking on any of the white areas (in addition to the close window button in the upper right).  

The lightbox shouldn't be closed, however, if a person clicks on any of the following:

1) any of the thumbnail images
2) the share icon that's in the upper right
3) any of the icons that are displayed when you click on the share icon
4) either the back or next arrows that are displayed in the magnify popup

Also -- note that currently, the magnify popups can be closed by clicking anywhere on the page .. which I assume would also close the underlying lightbox, and likely adds an additional layer of complexity.  

That being said .. perhaps this other approach that I mentioned might be more suitable in this scenario?

2) Add a floating "X" button (that follows you as you scroll), that you can click on to close the lightbox (similar to that "Back to Top" button on the lower right of the page)

Thanks,
- Yvan
0
 
Julian HansenCommented:
Then do a check for the image by doing this
if (!jQuery(e.target).hasClass('lightbox-grid-image') && !jQuery(e.target).hasClass('popup-trigger') && && jQuery('#lightbox-popup-main').hasClass('active')) {

Open in new window

But that is getting messy.
Might be an option to throw up an overlay between the popup and the underlying page and then register a click on that instead.
Currently the lightbox-popup-main covers the entire screen.

So you change your popup container to be the same width as the popup
#lightbox-popup-main {
	position: absolute;
	/* left: 0; *//* remove */
	/* right: 0; *//* remove */
	/* height: auto !important; *//* remove */
	/* width: 100%; *//* remove */
	top: 0;
	background: rgba(255, 255, 255, 0.8);
	z-index: 1000;
	overflow: hidden;
	visibility: hidden;
	margin: 0 auto; /* add */
	left: 50%; /* add */
	transform: translateX(-50%);/* add */
}

Open in new window

Then add an overlay to the start of the doc
<div class="overlay"></div>

Open in new window

Finally style the overlay
.overlay {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 900;
	background: rgba(0,0,0,.5);
}

Open in new window

Now whenyou open your popup you show your overlay
$('.overlay').show();

Open in new window


When you hide the popup you hide the overlay
$('.overlay').hide();

Open in new window


And you change your click handler to
jQuery(function() {
  jQuery('.overlay').on('click',function() {
    jQuery('.lightbox-close').trigger('click');
  });
});

Open in new window

That's the way I would do it.
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
egoselfaxisAuthor Commented:
Thanks for this latest suggestion Julian, but quite honestly, I think I'd like to try a simpler approach .. where I combine your ESC key handler with that floating close lightbox button I've been mentioning.  

I say this because this is a WordPress theme specific gallery that I've already heavily modified, where I'm serving up an entirely different experience for desktop vs. mobile users (using a combination of WordPress's "wp_is_mobile()" method and CSS media queries) and I can see this approach quickly resulting in an undesirable domino effect.  If possible, I'd prefer to contain my customizations to my child theme's main CSS stylesheet, as well as to the one "lightbox.php" file that I've been modifying.  

I'll do some experimenting of my own and will report back shortly.  Thanks again for your help!

- Yvan

You've been extremely helpful, however .. as always.
0
 
egoselfaxisAuthor Commented:
Julian -- you're the man.  I decided to just go for it and to adapt the Javascript code you sent me in your most recent reply (which we both agreed might become messy) .. but it actually wasn't too bad at all.  

https://royalpalm.com/property/1900-royal-palm-way/

Here's the code I ended up with, and that is working exactly the way I'd hoped it would:

jQuery(function() {
jQuery(document).on('click', function(e) {
  if (!jQuery(e.target).hasClass('popup-trigger') && !jQuery(e.target).hasClass('lightbox-grid-image') && !jQuery(e.target).hasClass('fa-share-alt') && !jQuery(e.target).hasClass('mfp-arrow') && !jQuery(e.target).hasClass('fa-facebook') && !jQuery(e.target).hasClass('mfp-close') && !jQuery(e.target).hasClass('fa-facebook') && !jQuery(e.target).hasClass('fa-twitter') && !jQuery(e.target).hasClass('fa-pinterest') && !jQuery(e.target).hasClass('fa-linkedin') && !jQuery(e.target).hasClass('fa-google-plus') && !jQuery(e.target).hasClass('fa-envelope') && !jQuery(e.target).hasClass('mfp-image-holder') && !jQuery(e.target).hasClass('mfp-close') && jQuery('#lightbox-popup-main').hasClass('active')) {
    jQuery('.lightbox-close').trigger('click');
  }
})

});

jQuery(document).on('keyup', function(e) {
if (e.keyCode == 27) {
  jQuery('.lightbox-close').trigger('click');
}
})    

Open in new window


Thanks again for your help!
0
 
Julian HansenCommented:
You are welcome.
0

Join & Write a Comment

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now