Boostrap模式在单击模式按钮之前在页面上显示弹出内容

Question

尝试在以下结帐页面上进行此模态工作： http : //designatwork.net/c3/checkout/ ，位于顶部的“拥有医师代码？输入医师代码”链接下。 当我将模式代码放入时，它会在应该打开弹出窗口的链接下方显示应该在弹出窗口中的内容。 我该如何使其正常工作？

<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

您需要将整个内容包装在modal div中，还需要将其ID设置为按钮使用的元素。 试试这个代码：

<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>

或直接从我的网站中拉出，我使用jQuery自动打开模式，但是仍然可以通过按钮打开它。

<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

您需要将模式内容包装在<div class="modal fade"></div>并对该包装器具有role="dialog"属性，如下所示：

模态html如下所示：

 <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>

触发元素看起来像这样：

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