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 3

Posted by Van Jayson Pelayo
Van Jayson Pelayo
5,263 Points

Instead of adding an image on the overlay, can anyone tell me how to add an html page on the overlay?

Im trying to create a lightbox, but instead of an image popping up, I want another html page to pop out.

2 Answers

Brendan Whiting
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points

The overlay is already html in this version - it's a div with an image inside it. No reason it can't be a whole long string of html stored in that variable.

Van Jayson Pelayo
Van Jayson Pelayo
5,263 Points

Your right, I believe this is the faster way of doing it.

Jeremy Canela
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jeremy Canela
Full Stack JavaScript Techdegree Graduate 30,766 Points
Jeremy Canela
.a{fill-rule:evenodd;}techdegree seal-36
Jeremy Canela
Full Stack JavaScript Techdegree Graduate 30,766 Points

You can use the HTML iframe tag. Example:

<iframe src="URL"></iframe>

More info here :)