html - 模态不显示如何解决？

Question

HTML代码:

<!-- Login Start -->

<div class="modal fade in" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
    <div class="modal-dialog" style="max-width:450px;">

        <div class="popup signin">

            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
            <h3>Sign in to hero pet</h3>
            <p class="two-buttons clearfix">
                <a href="#" data-toggle="modal" data-target="#register" data-backdrop="static" data-keyboard="false" id="closelogin" data-dismiss="modal">
                    <img src="<?php echo base_url();?>frontend/images/signup_grey.png" alt="">

                </a>
                <a href="#">
                    <img src="<?php echo base_url();?>frontend/images/signin_green.png" alt="">
                </a>
            </p>
            <form method="post" id="login-form" >
                <div class="field">
                    <input type="text" class="textbox" placeholder="Email Address">
                </div>
                <div class="field">
                    <input type="password" class="textbox" placeholder="Password">
                </div>
                <div class="field">
                    <label><a href="#" data-toggle="modal" data-target="#lostpassword" data-backdrop="static" data-keyboard="false" id="closelogin" data-dismiss="modal"> Lost Your Password?</a></label>
                </div>
                <div class="field">
                    <label>
                        <input type="checkbox" name="autologin" value="1"> Remember me</label>
                </div>
                <div class="field">
                    <button type="submit" class="submit" name="userlogin"><img src="<?php echo base_url();?>frontend/images/login-button.png"></button>
                </div>

            </form>
        </div>
    </div>
</div>
<!-- Login End -->

我不知道为什么会这样，有人可以帮我解决这个错误吗？提前致谢，抱歉我的英语不好。我尝试了很多选项，但所有选项都失败了。

Answer 1

模态框默认不显示。您需要通过使用 data-target 调用它来专门打开模式与模态 DIV ID 相关的:

<button type="button" data-toggle="modal" data-target="#login">Open Login Modal</button>

我创建了一个 BootPly 来展示这个 here .

另请注意，您的模态框缺少包含的 div <div class="modal-content">就在<div class="modal-dialog">里面.我已在以下示例中更正此问题:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Login Start -->
<div class="modal fade in" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
  <div class="modal-dialog" style="max-width:450px;">
    <div class="modal-content">
      <div class="popup signin">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h3>Sign in to hero pet</h3>
        <p class="two-buttons clearfix">
          <a href="#" data-toggle="modal" data-target="#register" data-backdrop="static" data-keyboard="false" id="closelogin" data-dismiss="modal">
            <img src="&lt;?php echo base_url();?&gt;frontend/images/signup_grey.png" alt="">
          </a>
          <a href="#">
            <img src="&lt;?php echo base_url();?&gt;frontend/images/signin_green.png" alt="">
          </a>
        </p>
        <form method="post" id="login-form">
          <div class="field">
            <input type="text" class="textbox" placeholder="Email Address">
          </div>
          <div class="field">
            <input type="password" class="textbox" placeholder="Password">
          </div>
          <div class="field">
            <label><a href="#" data-toggle="modal" data-target="#lostpassword" data-backdrop="static" data-keyboard="false" id="closelogin" data-dismiss="modal"> Lost Your Password?</a></label>
          </div>
          <div class="field">
            <label>
              <input type="checkbox" name="autologin" value="1"> Remember me</label>
          </div>
          <div class="field">
            <button type="submit" class="submit" name="userlogin"><img src="&lt;?php echo base_url();?&gt;frontend/images/login-button.png"></button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<!-- Login End -->

<button type="button" data-toggle="modal" data-target="#login">Open Login Modal</button>

希望对您有所帮助! :)