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

HTML

John Levy
John Levy
1,451 Points

Problems with the open modal

I made a open modal box and it works apart from a second red button to the right outside the main box. There should only be one red button in the large box. What have I done wrong for there to be a second button to the right and how can I remove it? I have attached my code below. Thanks in advance http://codepen.io/Johned22/pen/RoZeEj

2 Answers

Howard Hobbs
Howard Hobbs
3,909 Points

Hi John,

You've closed your #select anchor tag with </div> instead of </a>. Also, you haven't closed your #openModal div either. I think that's why your button is repeating all over the shop. Try this markup:

<div id="one">

<div id="circle"></div>

<a href="#openModal" id="select">CHOOSE OPTIONS</a> <div id="openModal" class="modalDialog"> <a href="#close" title="Close" class="close">X</a> </div>

</div>

Sia Hua Jiuh
Sia Hua Jiuh
11,138 Points

Agreed with Howard's answer

John Levy
John Levy
1,451 Points

Thanks for your response. Following what you said it has got rid of the second select button so thanks for that. The problem is I want to line several of these boxes side by side and now I made the changes it causes the contents to be shown even when the open modal box is closed. How can I make this info only be shown when I click on the open modal box? I have attahced my code below. http://codepen.io/Johned22/pen/bBYPdv Thanks