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

CSS jQuery Basics (2014) Creating a Simple Lightbox Perform: Part 2

Posted by Jennelle Barajas
Jennelle Barajas
5,317 Points

My overlay is not working, can anyone do a quick debug?

We are trying to create a overlay at 70% when an image is clicked.

Here is my jQuery code:

var $overlay = $('<div id="overlay"></div>'); // add overlay $("body").append($overlay);

Here is my CSS:

#overlay {

 background:rgba(0,0,0,0.7);
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  display:none;
}

It worked when I had the background:black; and the display:default;

Does anyone see anything wrong here?

Thank you!

Diego Fernando Lopez
Diego Fernando Lopez
Courses Plus Student 875 Points

hellow

4 Answers

Jennelle Barajas
Jennelle Barajas
5,317 Points
Jennelle Barajas
Jennelle Barajas
5,317 Points

Hmm still didn't work. I'm going to keep debugging and will post an update once I get it working.

bleedcmyk
bleedcmyk
5,945 Points

There are other ways you could do it, you could just add/remove a class on click?

$('.button').on('click', function(){ var i = $(this).index(); $('.overlay').removeClass('active').eq(i).addClass('active'); });

and then put display: none; on the .active class that gets added/removed, or put your background styling on it?

Or you could even do something like

$('.button').on('click', function(){ var i = $(this).index(); $('.overlay').hide().eq(i).show();

which would just hide or show .overlay

bleedcmyk
bleedcmyk
5,945 Points
bleedcmyk
bleedcmyk
5,945 Points

If it was working with background: black; instead of rgba( 0 0 0 0 .7), maybe use background: #000; and opacity: .7?

Diego Fernando Lopez
Diego Fernando Lopez
Courses Plus Student 875 Points

yes and finish .7 definet opacity

Diego Fernando Lopez
Diego Fernando Lopez
Courses Plus Student 875 Points

but the point .7 it is also 7

Jennelle Barajas
Jennelle Barajas
5,317 Points
Jennelle Barajas
Jennelle Barajas
5,317 Points

Thank you for your help bleedcmyk.

I actually forgot one line of code here:

$("#imageGallery a").click(function(event){ event.preventDefault(); var href = $(this).attr("href"); $overlay.show(); console.log("hrefffff");

I forgot $overlay.show();

bleedcmyk
bleedcmyk
5,945 Points
bleedcmyk
bleedcmyk
5,945 Points

xD Did that fix it?