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 trialMurray Dare
11,035 PointsIf 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.
Manuel Rodiguez
9,431 PointsHi 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
9,431 PointsHi 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
231,275 PointsWhen 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.
Mindy Sandilands
15,743 PointsMindy Sandilands
15,743 PointsNot 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.