锚点点击不打开模式答案

【问题标题】：anchor click doesn't open the modal锚点点击不打开模式
【发布时间】：2017-07-09 15:57:04
【问题描述】：

这就是我随身携带锚标记的方式。

<a href="#" data-toggle="modal" data-target="#modalTC">terms and conditions</a>

我的模态如下所示

<!-- Modal -->
 <div class="modal fade" id="modalTC" role="dialog">
  <div class="modal-dialog">
   <!-- Modal content-->
    <div class="modal-content">
     <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times; </button>
      <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
      <p>Some text in the modal.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
   </div>
  </div>
 </div>

Fiddle.

我不确定出了什么问题。 PS：我确实有相关文件。 IE。 Bootstrap 和 Jquery。

【问题讨论】：

检查 1：jquery.(min.)js 和 bootstrap.(min.)js 均按此顺序加载。检查 2：你能在小提琴中重现这个问题吗？检查 3：如果您无法解决问题，则问题在于页面中的其他一些脚本在点击时绑定并取消事件或在它到达 bootstrap.js 事件之前返回 false。
你检查过控制台吗？
我发现您的问题是您忘记在您的页面中引用 Jquery Js。检查您的控制台
我的错。多谢你们。 @charlietfl 啊，但如果它在这里，人们不应该尝试成为纳粹。
所以你是说因为你懒得找错误我们应该接受不好的问题？回答的每个人都在控制台中查看错误。德国政治与这里的任何事情有什么关系？

标签： jquery html css twitter-bootstrap

【解决方案1】：

使用这段代码，在本地添加三个文件 bootstrap.min.css、jquery.min.js、bootstrap.min.js。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="css/bootstrap.min.css">
      <script src="js/jquery.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h2>Modal Example</h2>
      <!-- Trigger the modal with a button -->
      <a href="#" data-toggle="modal" data-target="#modalTC">terms and conditions</a>
     <!-- Modal -->
     <div class="modal fade" id="modalTC" role="dialog">
      <div class="modal-dialog">
       <!-- Modal content-->
        <div class="modal-content">
         <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times; </button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
       </div>
      </div>
     </div>
    </div>
  </body>
</html>

【讨论】：

并添加我上面提到的三个文件。
代码没问题。唯一的问题是你可能忘记添加js和css文件。所以使用本地保存的js和css文件。

【解决方案2】：

试试这个

<a href="#" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </a>

或者参考这个 ..https://getbootstrap.com/javascript/#modals

要记住的另一件事是，您需要为此加载 jquery，因此请确保正确加载它。

【讨论】：

【解决方案3】：

你确定你已经包含了 bootstrap 和 jquery 吗？我刚刚添加了

<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

效果很好

【讨论】：

【解决方案4】：

您必须在 bootstrap.js 之前包含 jquery 文件。这是你更新的小提琴：jsfiddle.net/dssoft32/ehmepvya/2/

Bootstrap 框架依赖于 jquery。所以你必须首先包含jquery。导入文件的顺序在 java 脚本中起着很大的作用。

【讨论】：

【解决方案5】：

你需要先调用 jQuery（在 bootstrap.min.js 之前）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Working fiddle

希望对你有帮助。

【讨论】：

【解决方案6】：

一切正常。试试这个：

<a href="#" data-toggle="modal" data-target="#modalTC">terms and conditions</a>

Working Fiddle

我想你忘了添加 JS 和 CSS。

【讨论】：

【解决方案7】：

在 jQuery 之前加载 Bootstrap。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<a href="#" data-toggle="modal" data-target="#modalTC">terms and conditions</a>


<!-- Modal -->
 <div class="modal fade" id="modalTC" role="dialog">
  <div class="modal-dialog">
   <!-- Modal content-->
    <div class="modal-content">
     <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times; </button>
      <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
      <p>Some text in the modal.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
   </div>
  </div>
 </div>

【讨论】：

【解决方案8】：

确保您在jquery.min.js 之后调用bootstrap.min.js

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

<a href="#" data-toggle="modal" data-target="#modalTC">terms and conditions</a>


<!-- Modal -->
 <div class="modal fade" id="modalTC" role="dialog">
  <div class="modal-dialog">
   <!-- Modal content-->
    <div class="modal-content">
     <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times; </button>
      <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
      <p>Some text in the modal.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
   </div>
  </div>
 </div>

【讨论】：