Question

以下是我如何使用锚标记。

<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：我和我有相关的文件。即。 Bootstrap和Jquery。

Answer 1

确保您在bootstrap.min.js

之后调用jquery.min.js

＆＃13;

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

＆＃13;

Answer 2

一切都很好。试试这个：

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

Working Fiddle

我想你忘了添加JS和CSS。

Answer 3

在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>

Answer 4

您需要先调用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

希望它有所帮助。

Answer 5

使用此代码并在本地添加三个文件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>

Answer 6

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

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

Answer 7

尝试使用此

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

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

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

Answer 8

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

result = np.empty(a.shape, dtype=float)
result[a<=2] = pred_b
result[a>2] = pred_c

并且工作正常

锚点击不会打开模态

8 个答案: