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.

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,567 Points
Wayne Priestley
Wayne Priestley
19,567 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,567 Points
Wayne Priestley
Wayne Priestley
19,567 Points

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