引导模式不显示[重复]答案

【问题标题】：Bootstrap modal does not show up [duplicate]引导模式不显示[重复]
【发布时间】：2017-05-19 15:00:05
【问题描述】：

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

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

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

谢谢。

【问题讨论】：

你的控制台说什么？
试试在 Bootstrap JS 之前加载 jQuery 吧？
jQuery 应该在 bootstrap js 之前调用。
将 jquery 3.2 文件放在 bootstrap.min.js 之前
@Roberrrt 谢谢，我以前没有考虑过查看控制台，但现在当我查看它时，我看到以下错误消息：“未捕获的错误：Bootstrap 的 JavaScript 在 bootstrap.min 需要 jQuery。 js:11”。让我尝试解决这个问题，然后我将在这里编辑问题。

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

尝试在引导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>

【讨论】：

谢谢你的作品。只是一个简单的问题：我怎么知道我需要在引导之前调用 jquery？我在文档中看不到任何警告
简单，Bootstrap JS 有 jQuery 作为依赖项。应该在之前加载依赖项
好的，现在很清楚了，再次感谢。我会接受这个作为答案。
简单：Bootstrap JS 需要 jQuery。如果它有效，请不要忘记标记它:)

【解决方案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>

【讨论】：

之前已经回答过
当然，在我编码/回答时会有人知道。没看到。