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

Posted by John Levy
John Levy
1,451 Points

Open modal does not close once opened.

I cannot close my open modal box once opened. It is supposed to open when I click on the image which is shown in the second code pen attached which it does. The problem is once it is open it does not close. The background of the page should also show the rest of the page so how do I make the background transparent? The first code pen shows the HTML and CSS fore the open model. How do I fix this issue so it closes when the user opens it up and still have a transparent background. I have attached the two codepens below.

First code pen- http://codepen.io/Johned22/pen/QGWJPr

Second code pen- http://codepen.io/Johned22/pen/GNRwbW

Thanks in advance

4 Answers

Jesus Mendoza
Jesus Mendoza
23,289 Points
Jesus Mendoza
Jesus Mendoza
23,289 Points

Hey John,

You need to add functionallity with JavaScript or jQuery to hide the modal when you click the "X".

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

Thanks for your reply. I am not familiar with javaScript yet. Can you please point me in the right direction on how I can fix my problem with javaScript? Thanks

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

I also dont know why I would need JavaScript as I did a similar one with without using javaScript shown in the codepen below where it opens and closes and I only used HTML and CSS. I just cant figure out how to do it when I click pn the image shown in my first post. http://codepen.io/Johned22/pen/zoYVOj

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

How can I make this work without javaScript? Thanks