Question

我想在页面加载时在我的网站上显示一个模态。但是我收到了这个错误

未捕获的TypeError：$（...）。modal不是函数

我也试过了jQuery但也得到了相同类型的错误

未捕获的TypeError：jQuery（...）。modal不是函数

我已经多次使用谷歌搜索并应用不同的解决方案但没有成功。

这是我的剧本

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
   $(window).on('load',function(){
      $('#loadModal').modal('show');
   });
</script>

这是我的模态

<div class="modal hide fade" id="loadModal">
    <div class="modal-header">
         <a class="close" data-dismiss="modal">×</a>
         <h3>Modal header</h3>
    </div>
    <div class="modal-body">
         <p>One fine body…</p>
    </div>
    <div class="modal-footer">
         <a href="#" class="btn">Close</a>
         <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>

Answer 1

必须首先引用jQuery，因此必须先调用jquery.min.js，然后再调用bootstrap.min.js。试试这个：
```
 <script src="/jquery-3.3.1.min.js"></script> 
 <script src="/bootstrap.min.js"></script>
```
有时，如果在您的代码中多次声明jQuery，也会显示此警告。第二个jQuery声明阻止bootstrap.js正常工作。问题是由于拥有jQuery实例不止一次。我已经用jQuery中的这段代码解决了这个问题：
```
 window.$('#modal-id').modal();
```

Answer 2

解决了!!!这是与订单相关的问题。

bootstrap.min.js应该在之后宣布所有jQuery个库。

Answer 3

Bootstrap模态不适用于jQuery UI dialog

bootstrap模态错误实际上是您在调用modal函数之前不包含bootstrap的javascript的结果。模态是在bootstrap.js中定义的，而不是在jQuery中定义的。还需要注意的是，引导程序实际上需要jQuery来定义模态函数，因此在包含引导程序的javascript之前包含jQuery非常重要。为避免此类错误，请确保在调用模态函数之前先包含jQuery，然后包含引导程序的javascript。

Answer 4

我在 jsp 中添加了一个模态对话框，并尝试在 jsx 中使用 javascript 打开它并遇到相同的错误："...modal is not a函数"

就我而言，只需将以下导入添加到 jsx 即可解决问题。

Mockito.mockStatic

Answer 5

试试这个：

$(document).ready(function(){
  $('#exampleModal').modal('show');
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>


<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

未捕获的TypeError：$（...）。modal不是函数

5 个答案: