Boostrap modal showing popup content on page before clicking on modal button

Question

Trying to make this modal work on the checkout page here: http://designatwork.net/c3/checkout/ under the "Have a Physician Code? Enter your Physician Code" link at the top. When I put the modal code in, it shows the content that's supposed to be in the popup below the link that's supposed to open the popup. How do I get this to work properly?

<p>Don't have a Physician Code? <a data-toggle="modal" data-target="#physcode">Get one here!</a></p>
                <!-- Physician Code Modal -->
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-body">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      <p>AQ Skin Pro products are available exclusively through participating clinics and physicians offices. If you do not have an Exclusive Physician Code, click "generate a code" below.</p>
                      <button class="nm-simple-add-to-cart-button single_add_to_cart_button button alt" data-dismiss="modal" aria-label="Close">Generate a Code</button>
                    </div>
                  </div>
                </div>

Answer 1

You need to wrap the entire thing in a modal div, also there you need to set the id of it to the element that the button uses. Try this code:

<p>Don't have a Physician Code? <a data-toggle="modal" data-target="#physcode">Get one here!</a></p>
<div class="modal" id="physcode">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
        <h4 class="modal-title">Physician Code</h4>
      </div>
      <div class="modal-body">
        <p>AQ Skin Pro products are available exclusively through participating clinics and physicians offices. If you do not have an Exclusive Physician Code, click "generate a code" below.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Or pulled directly from my website, I use jQuery to open the modal automatically, but a button still works to open it.

<div class="modal" id="modalLogin">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                <h4 class="modal-title">Login</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="formLogin" method="post" action="./index.php">
                    <fieldset>
                        <div class="form-group">
                            <label for="inputUsername" class="col-lg-2 control-label">Username</label>
                            <div class="col-lg-10">
                                <input type="text" class="form-control" id="inputUsername" name="inputUsername" data-validation="alphanumeric length required" data-validation-allowing="-_" placeholder="User">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword" class="col-lg-2 control-label">Password</label>
                            <div class="col-lg-10">
                                <input type="password" class="form-control" id="inputPassword" name="inputPassword" data-validation="strength required" data-validation-strength="3" placeholder="Password">
                                <span class="help-block"><a href="./index.php?p=/account/forgot">Forgot My Password</a></span>
                            </div>
                        </div>
                    </fieldset>
                </form>
            </div>
            <div class="modal-footer">
                <a type="button" href="./index.php" class="btn btn-default">Cancel</a>
                <button type="submit" class="btn btn-default" form="formLogin">Login</button>
            </div>
        </div>
    </div>
</div>

Answer 2

You need to wrap your modal content within the a <div class="modal fade"></div> and have the role="dialog" attribute to that wrapper as following :

The modal html goes like this:

 <div class="modal fade" id="physcode" tabindex="-1" role="dialog" >
         <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                <h4 class="modal-title">Physician Code</h4>
              </div>
              <div class="modal-body">
                <p>AQ Skin Pro products are available exclusively through participating clinics and physicians offices. If you do not have an Exclusive Physician Code, click "generate a code" below.</p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>

     </div>

And the trigger element looks like this:

<p>Don't have a Physician Code?
  <!-- Button trigger modal -->
  <a data-toggle="modal" data-target="#physcode">Get one here!</a>
</p>