Welcome to the Treehouse Community
The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

Patrick Brown
7,995 PointsMultiple Bootstrap Modals
So I recently completed the Bootstrap section and thought it'd be great for a project I was working on for a friend. It's a simple single page site and the design I had sketched out had pop-up modals for some simple text.
I built and styled the first modal and it worked great. But when I added a second and a third one, the page would darken, but neither modal would open.
After combing through the documentation, Bootstrap did mention I can't have multiple windows open. Is the window for the first one not closing? Or is there a more better way for me to pull off multiple modal windows?
<!-- .modal -->
<div id="firstModal" class= "modal fade" >
<div class="modal-dialog">
<div class = "modal-content">
<div class = "modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
</button>
<h5>FIRST</h5>
</div>
<div class = "modal-body">
<p>Content</p>
</div>
</div>
</div>
<div id="secondModal" class= "modal fade" >
<div class="modal-dialog">
<div class = "modal-content">
<div class = "modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
</button>
<h5>SECOND</h5>
</div>
<div class = "modal-body">
<p>Content</p>
</div>
</div>
</div>
<div id="thirdModal" class= "modal fade" >
<div class="modal-dialog">
<div class = "modal-content">
<div class = "modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
</button>
<h5>THIRD</h5>
</div>
<div class = "modal-body">
<p>Content</p>
</div>
</div>
</div>
3 Answers

Wayne Priestley
19,567 PointsHi Patrick, I notice you have 5 opening div's and only 4 closing div's on all your modals.

Patrick Brown
7,995 PointsAnd... that fixed it.
Thanks Wayne! I hate it when I overlook stuff like that.

Wayne Priestley
19,567 PointsGlad to help Patrick, It's usually something like this and we can't see it as we look too hard :)