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 Bootstrap Basics Building Forms With Bootstrap Form Groups and Form Controls

Posted by Matthew Walavich
Matthew Walavich
176 Points

Modal Problems

Modal Wont Appear when I click the sign up button. The screen fades but nothing pops up

2 Answers

Mike Schaming
Mike Schaming
13,925 Points
Mike Schaming
Mike Schaming
13,925 Points

Hi Matthew- you may have figured this out already- but just in case, your data-target="#register" needs to match the ID in your modal component div. Currently, your ID is still set to "exampleModal". best of luck!

Matthew Walavich
Matthew Walavich
176 Points

Thanks Mike! I figured it out!

Feisty Mullah
Feisty Mullah
25,849 Points
Feisty Mullah
Feisty Mullah
25,849 Points

Hello Matthew, If you could link/paste your codes with the issue so everyone can have a look on to your codes and suggest you the solution.

Matthew Walavich
Matthew Walavich
176 Points 
    <!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#register">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Register for Full Stack Conf</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- registration form-->
        <form>
  <div class="form-group">
    <label for="formGroupExampleInput" for="name">Name:</label>
    <input type="text" class="form-control" id="name">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2" for="email">Email:</label>
    <input type="email" class="form-control" id="email">
  </div>
</form>
        <!-- registration form -->
      </div>
    </div>
  </div>
</div>