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 Perfect

Posted by Samiullah khan
Samiullah khan
Courses Plus Student 5,994 Points

Making overlay Responsive

We've just create a nice lightbox. So we don't need any jquery for this, but how we can take it to the next level and make it responsive. I want the overlay in absolute middle and the image shrinks it's size.

Richard Duncan
Richard Duncan
5,568 Points
Richard Duncan
Richard Duncan
5,568 Points

Difficult to say without seeing your current implementation. Are you creating the overlay elements on the fly or is it persistent in the page from page load and say hidden?

Samiullah khan
Samiullah khan
Courses Plus Student 5,994 Points

It's on the fly, I've implemented the way it's thought in this tutorial.

1 Answer

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

You could either do it with jQuery/JS or css. With css, you would give your overlay's content box a height and width in percentages. For example, width: 80% and height: 50%, Then you would position the content box fixed and set its top and left offset to half 100% minus the percentage of the height and width respectively. So, in this case the left would be 10% ( (100%-80%)/2) and the top would be 25% ( (100%-50%)/2). Then you should set your content box to have an overflow-y of scroll. that way if you content's height exceeds that height of the content box users can scroll. So your html should look something like this:

<div id="overlay-wrapper">
    <div id="overlay-content-box">
        //put the content for you overlay herer
    </div>
</div>

Then your css should look something like this:

#overlay-wrapper{
    position: fixed;
    top: 0;
    left:0;
    bottom:0;
    right: 0;
    background-color: rgba(0, 0, 0, .75);
}

#overlay-content-box{
    width: 80%;
    height:50%;
    position: fixed;
    left: 10%;
    top: 25%;
    overflow-y: scroll;
}