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

Development Tools

Stephen Poole
Stephen Poole
9,361 Points
Posted by Stephen Poole
Stephen Poole
9,361 Points

Need explanation on how to set up "modal" boxes on website... Please help!

Ok so first of all, I'm still quite new to web development. I know html and css (beginner-intermediate level) and have made a couple basic websites. I am now working on a more complicated website. Basically there are going to be profile pictures for 10 different team members. I don't want to clutter up the page by putting descriptions under each profile picture, so I want to put a "modal" box (I think this is what it's called) with each picture so that the information is displayed when the picture is clicked. I feel like I need more than just html and css to do this, so I really need a good walkthrough of all this. If someone could help me out it would be tremendously appreciated. Thanks in advance!

P.S. In case the explanation of what I'm trying to do was unclear, please see the pictures displayed on this website. The popup description is what I am trying to achieve. Thanks! https://vungle.com/about/

1 Answer

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

Hi, Stephen. You might want to take a look at Bootstrap's modals. You can do it without Bootstrap, but it would require you knowing JavaScript/jQuery, which is a little complicated to teach in a forum post. (There are some great jQuery courses here, though!) The documentation there does a pretty good job of explaining what you need in terms of markup, so you could head over there and give it a good read-through and try it out! :)

Stephen Poole
Stephen Poole
9,361 Points
Stephen Poole
Stephen Poole
9,361 Points

Thanks Ryan! I found exactly what I was looking for and it works great. Can't say I understand the code but it works! :)