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 cassac
cassac
9,628 Points

What's wrong with my code?

The prevent default works, however the body doesn't turn black when the a link is clicked. Have I overlooked a typo? Not sure why its not working...

jQuery:

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

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

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

css:

#overlay {
 background:black;
 width:100%;
 height:100;
 position:absolute;
 top:0;
 left:0;
}

2 Answers

David Tonge
David Tonge
Courses Plus Student 45,640 Points 
height: 100%;

You're missing a % sign. Could be that.

cassac
cassac
9,628 Points
cassac
cassac
9,628 Points

Ugh... Yes, that was it. Thanks!