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!

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

Posted by Patrick Brown
Patrick Brown
7,995 Points

Multiple 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">&times;
                    </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">&times;
                    </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">&times;
                    </button>
                    <h5>THIRD</h5>
                </div> 
                <div class = "modal-body"> 
                    <p>Content</p>
                </div>
        </div>
    </div>

3 Answers

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Patrick, I notice you have 5 opening div's and only 4 closing div's on all your modals.

Patrick Brown
Patrick Brown
7,995 Points
Patrick Brown
Patrick Brown
7,995 Points

And... that fixed it.

Thanks Wayne! I hate it when I overlook stuff like that.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Glad to help Patrick, It's usually something like this and we can't see it as we look too hard :)