Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript jQuery Basics (2014) Creating a Simple Lightbox Perform: Part 4

Murray Dare
Murray Dare
11,035 Points
Posted by Murray Dare
Murray Dare
11,035 Points

If I wanted to make the lightbox disappear, but only when the background was clicked. How would I do this?

I have used this tutorial for the basis of a project I am doing, but trying to make this amendment has been really difficult for me.

I was hoping someone could help push me in the right direction.

I want the lightbox to stay open when clicked, but close when the background is clicked.

Been working on this for the last few hours and so far it has beaten me!

Any help is much appreciated.

Mindy Sandilands
Mindy Sandilands
15,743 Points

Not sure what you have started with by here's a similar question (I think) to what you are trying to do. Maybe this can be adapted to your code.

http://stackoverflow.com/questions/29440518/close-lightbox-on-click-outside-of-the-child-div

Hope this helps.

Manuel Rodiguez
Manuel Rodiguez
9,431 Points
Manuel Rodiguez
Manuel Rodiguez
9,431 Points

Hi Murray,

Check this code and let me know if you have any questions! 

//Creating two independent Divs - An overlay, an image container

var $img = $("<img>");
var $imgContainer = $("<div class='imgContainer'></div>");
var $overlay = $("<div class='overlay'></div>");

$imgContainer.append($img);
$("body").append($overlay);
$("body").append($imgContainer);

// Function that displays the overlay and gives a src attribute to image container
// Check CSS for positioning of imgContainer on top of overlay

$("#imageGallery a").click(function(event){
  event.preventDefault();
  var href = $(this).attr("href");
  $(".imgContainer img").attr("src", href);
  $imgContainer.css("display","initial");
  $overlay.css("display","initial");
});

//Function that hides imgContainer and overlay when overlay is clicked

$overlay.click(function(event){
  $(this).hide();
  $imgContainer.hide();
});

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;  
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}

.imgContainer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
Manuel Rodiguez
Manuel Rodiguez
9,431 Points
Manuel Rodiguez
Manuel Rodiguez
9,431 Points

Hi Murray,

I just found another way to do it which is cleaner. Let me know if this makes sense

var $img = $("<img>");
var $imgContainer = $("<div class='imgContainer'></div>");
var $overlay = $("<div class='overlay'></div>");

$imgContainer.append($img);
$overlay.append($imgContainer);
$("body").append($overlay);

// Function that displays the overlay and gives a src attribute to image container
// Check CSS for positioning of imgContainer 


$("#imageGallery a").click(function(event){
  event.preventDefault();
  var href = $(this).attr("href");
  $(".overlay img").attr("src", href);
  $overlay.css("display","flex");
});

//Function that hides imgContainer when overlay is clicked

$(".overlay, .imgContainer").click(function(event){
  event.stopPropagation();
  if ($(this)[0] === $overlay[0]) {
    $overlay.css("display","none");
   };
});

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;  
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
}

.imgContainer{
  padding: 10%;
}

1 Answer

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

When you say you want the lightbox to "stay open when clicked", do you mean "stay open when the image is clicked"?

I would expect you could do this with two click handlers. One, for the element holding the background (perhaps the body?), that closes your overly. Then another one, for just the image, that simply returns false to stop propagation and otherwise does nothing.

If you need more specific help you could post your code (be sure to blockquote it properly) or make a snapshot of your workspace and post the link.