Question

我知道这可能是一个非常简单，愚蠢的问题，但是我四处搜寻，似乎无法弄清楚我的问题是什么。我直接从bootstrap网站复制并粘贴了示例，无论如何我都无法在屏幕上弹出模式。

https://codepen.io/anon/pen/Pdrvoa上的Codepen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test Webpage</title>
  <link href='bootstrap.min.css' rel='stylesheet' type='text/css' />
  <script href='bootstrap.min.js' type='text/javascript'></script>
</head>
<body>
  <div class='container'>
    <div class='row'>
      <div class='col-md-12'>
        <!-- Button trigger modal -->
      <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Launch demo modal
      </button>
      </div>
    </div>
  </div>
  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Answer 1

您的问题是引导程序的引用。看那个例子。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test Webpage</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <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-12'>
        <!-- Button trigger modal -->
      <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Launch demo modal
      </button>
      </div>
    </div>
  </div>
  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Answer 2

我会检查您的JS / CSS文件的位置。看起来像是一条时髦的路。确保您指向正确的文件夹或使用最新的CDN（我相信他们网站上的示例使用CDN）。

仅供参考，您可以将https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css用于样式表和https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js（针对javascript）。另外，还要确保您在其中有一个jQuery参考（https://code.jquery.com/），因为许多bootstrap的javascript功能都需要此参考。

注意：请确保在对boostrap.js的引用之前添加对jQuery的引用！

编辑

我看到利奥·罗塞蒂（Leo Rossetti）击败了我，以他的榜样似乎奏效。

简单的模态不会显示

2 个答案: