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

Posted by Lukas Korol
Lukas Korol
2,649 Points

Why we use display: none for overlay?

Below there is overlay css. How works display: none? I read that it hide element. I test without it and screen is dark with opacity on the beginning. How is it that with display: none it works after click, doesn't before. Thank's for answer.

#overlay {
    background: rgba(0,0,0,0.7);
    /*opacity: 0.7;*/
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    text-align: center;
}

1 Answer

Grace Kelly
Grace Kelly
33,990 Points
Grace Kelly
Grace Kelly
33,990 Points

Hi Lukas, in order to explain how this works, I think it's best if we break the entire process down:

we first create the element $overlay like so:

var $overlay = $('<div id="overlay"></div>'); //this creates a div with the id #overlay

We then set its display attribute to none so the overlay is hidden when the page loads

#overlay {
  display:none; //hide the overlay
}

When we click on an image we want the overlay to show so we set the following:

$("#imageGallery a").click(function(event){ //when an image is clicked

  $overlay.show();  //Show the overlay.

});

Likewise when we click the overlay when it appears, we want it to dissappear, so we do the following:

$overlay.click(function(){ //when the overlay is clicked

  $overlay.hide();  //Hide the overlay
});

You can think of show() as setting the display attribute to "block" and the hide() as setting it to "none" in the css, infact if you check out #overlay's styling in the JavaScript console you can see these changes taking effect as you click the images and the overlay:

JavaScipt Console:

//When an image is clicked - show()
element.style {
  display: block;
}

//When the overlay is clicked - hide()
element.style {
  display: none;
}

Hope that helps!!

Lukas Korol
Lukas Korol
2,649 Points

Perfect explanation. Thank you Grace Kelly!