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 2

Posted by Osman Akpınar
Osman Akpınar
2,199 Points

Cannot get overlay div with black background

I am sorry to ask a question like where am I doing wrong but I really could not figure it out what is wrong .

I didnt change anything on html file and followings are my other files.

app.js

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

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

style.css

overlay{

position: "absolute";
width: "100%";
height: "100%";
left: 0;
top: 0;
background: black;

}

When I type $overlay to the console of browser, I get a div with overlay class which is perfectly normal. I type $("body") to console and get the body element containing that div just after the list and scripts tag. But nothing (expect from getting the log messages on console) happens on the webpage when I click on a link (little images).

3 Answers

Simon Coates
Simon Coates
28,694 Points
Simon Coates
Simon Coates
28,694 Points

Take a look at

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<style>
#overlay{

position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
color: white;
display:none;
background: black;
}
</style>

<body>
<div id="imageGallery">
<a href="#">anchor</a>
</div>
</body>
<script>
var $overlay = $('<div id="overlay">x</div>'); 
$("body").append($overlay);

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

</script>

I seem to get a black overlay. Might be what you're looking for.

Osman Akpınar
Osman Akpınar
2,199 Points

Thank you for both of your answer. Through comparing my code with your one, I noticed my mistake which is typing the values of css attributes inside quotation marks.

Simon Coates
Simon Coates
28,694 Points
Simon Coates
Simon Coates
28,694 Points 
#overlay {

haven't tested it, but it seems like your style is looking for a <overlay> tag.

Osman Akpınar
Osman Akpınar
2,199 Points

Actually I have hashtag on the original code but lost it while copy - pasting;

Ronnelle Torres
Ronnelle Torres
5,958 Points
Ronnelle Torres
Ronnelle Torres
5,958 Points

I had the same problem.. Though I checked the CSS code and found out that the h1 declaration text-align: center is missing a semi colon ( ; ) Maybe they accidentally missed that out when adding this workspace project.

Marie Orriss
Marie Orriss
7,432 Points

Thanks for posting that catch! Had the same issue. When I added the semi colon it worked for me :)