Question

我是Bootstrap框架的新手并尝试显示模态。我已经在StackOverflow上看到了确切的问题，但仍无法使其正常工作。

以下是我尝试实现模态弹出窗口的部分：

<div class="col-md-6">
  <img class="img-responsive" src="http://placehold.it/555x300" data-toggle="modal" data-target="#project1">
  <h3>Appify</h3>
  <p><a href="http://github.com">Link to project</a></p>
</div>

以下是我的完整 index.html 文件：

<!DOCTYPE html>
<html>
<head>
 <link href="css/bootstrap.min.css" rel="stylesheet">
 <script type="text/javascript" src="js/bootstrap.min.js"></script>
 <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-md-6">
        <img class="img-responsive" src="http://placehold.it/100x100">
    </div>
    <div class="col-md-6 text-right text-uppercase">
      <h1>Jane Doette</h1>
      <h3>Front-end Ninja</h3>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <img class="img-responsive" src="http://placehold.it/1140x350">
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <h2>Featured Work</h2>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <img class="img-responsive" src="http://placehold.it/555x300" data-toggle="modal" data-target="#project1">
      <h3>Appify</h3>
      <p><a href="http://github.com">Link to project</a></p>
    </div>
    <div class="col-md-6">
      <img class="img-responsive" src="http://placehold.it/555x300">
      <h3>Appify</h3>
      <p><a href="http://github.com">Link to project</a></p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <img class="img-responsive" src="http://placehold.it/555x300">
      <h3>Appify</h3>
      <p><a href="http://github.com">Link to project</a></p>
    </div>
    <div class="col-md-6">
      <img class="img-responsive" src="http://placehold.it/555x300">
      <h3>Appify</h3>
      <p><a href="http://github.com">Link to project</a></p>
    </div>
  </div>
</div>


<!-- Modal -->
<div class="modal fade" id="project1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">Favorite App Page</h4>
            </div>
            <div class="modal-body">
                <img class="img-responsive" src="http://placehold.it/555x300">
                This was my first project in this class. I learned a lot about HTML and CSS.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>


</body>
</html>

在这里你可以看到我的文件结构：

当我点击精选作品标题下的图片时，我希望看到一个模态，但它没有显示出来。谁能告诉我这里有什么问题？

感谢。

Answer 1

尝试在bootstrap js之前调用jquery

 <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
 <script type="text/javascript" src="js/bootstrap.min.js"></script>

Answer 2

以下是适合您的工作演示：

Jquery应放在Bootstrap之前。

<!DOCTYPE html>
    <html>
    <head>
     <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="container">
      <div class="row">
        <div class="col-md-6">
            <img class="img-responsive" src="http://placehold.it/100x100">
        </div>
        <div class="col-md-6 text-right text-uppercase">
          <h1>Jane Doette</h1>
          <h3>Front-end Ninja</h3>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <img class="img-responsive" src="http://placehold.it/1140x350">
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <h2>Featured Work</h2>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <img class="img-responsive" src="http://placehold.it/555x300" data-toggle="modal" data-target="#project1">
          <h3>Appify</h3>
          <p><a href="http://github.com">Link to project</a></p>
        </div>
        <div class="col-md-6">
          <img class="img-responsive" src="http://placehold.it/555x300">
          <h3>Appify</h3>
          <p><a href="http://github.com">Link to project</a></p>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <img class="img-responsive" src="http://placehold.it/555x300">
          <h3>Appify</h3>
          <p><a href="http://github.com">Link to project</a></p>
        </div>
        <div class="col-md-6">
          <img class="img-responsive" src="http://placehold.it/555x300">
          <h3>Appify</h3>
          <p><a href="http://github.com">Link to project</a></p>
        </div>
      </div>
    </div>


    <!-- Modal -->
    <div class="modal fade" id="project1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">Favorite App Page</h4>
                </div>
                <div class="modal-body">
                    <img class="img-responsive" src="http://placehold.it/555x300">
                    This was my first project in this class. I learned a lot about HTML and CSS.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>


    </body>
    </html>

Bootstrap模式不会显示

2 个答案: