未捕获的类型错误：$(...) .modal不是一个函数。

Question

我希望在我的网站加载页面时显示一个模态框。但是我遇到了这个错误：

Uncaught TypeError: $(...).modal is not a function

我也尝试过使用jQuery，但仍然得到相同类型的错误：

Uncaught TypeError: jQuery(...).modal is not a function

我已经多次搜索并尝试了不同的解决方案，但都没有成功。

以下是我的脚本：

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

- Raff

---

它正常工作 - http://plnkr.co/edit/2ioUOGPNvWhCO9fMBH2K?p=preview - Nikhil Aggarwal

也许 bootstrap.min.js 已经在您的计算机上加载了。打开开发者工具 (F12) 并转到 网络选项卡，然后单击 禁用缓存 并按下刷新 (F5)。 - Ritwick Dey

其实我在项目中使用了很多脚本...也许这个问题就是由这些脚本命令造成的...我该怎么找到那些脚本的命令顺序呢！！哦！ - Raff

顺序也很重要。 jQuery库 > bootstrap库 > 初始化 - Ram kumar

很可能你的jQuery库被阻止了，因为你的网站是https协议，而那个CDN http://code.jquery.com/jquery-1.11.0.min.js 不是。将该文件保存在服务器本地并从那里引用。 - techie_28

Answer 1

问题已解决！！！这是一个与顺序有关的问题。

bootstrap.min.js 应该在所有 jQuery 库之后声明。

- Raff

---

我花了三个小时不知所措，直到找到了你的解决方案，它起作用了！非常感谢。 - cdcaiza

Answer 2

我在jsp中添加了一个模态对话框，并尝试在jsx中使用javascript打开它，结果遇到了相同的错误："...modal is not a function" 在我的情况下，只需在jsx中添加以下导入即可解决问题。 import "./../bower/bootstrap/js/modal.js"; // or import ".../bootstrap.min.js"

- user1723453

Answer 3

1. jQuery must be referenced first, so you must call the jquery.min.js and then bootstrap.min.js. Try this :

    <script src="/jquery-3.3.1.min.js"></script> 
    <script src="/bootstrap.min.js"></script>
   

2. Sometimes this warning may also be shown if jQuery is declared more than once in your code. The second jQuery declaration prevents bootstrap.js from working correctly. The problem is due to having jQuery instances more than one time. I have solved this problem with this code in jQuery :

    window.$('#modal-id').modal();
   

- Farhan Yudhi Fatah

---

哇，太感谢了，你救了我的一天。 - Richard Willian

Answer 4

你的网页加载速度可能会非常快。 然后选择器标签中未绑定modal('show')事件。

这将创建一个错误。

$(document).ready(function() { $("selectorName").modal('show'); });

- kausmil

Answer 5

Bootstrap模态框与jQuery UI对话框不兼容。

Bootstrap模态框错误实际上是由于在调用模态框函数之前未包含bootstrap的javascript。模态框在bootstrap.js中定义，而不是在jQuery中。还要注意的是，Bootstrap实际上需要jQuery来定义模态框函数，因此在包含Bootstrap的javascript之前，包含jQuery非常重要。为了避免这种错误，请确保在调用模态框函数之前先包含jQuery，然后再包含Bootstrap的javascript。

- SAMSON MATTHEW

Answer 6

请尝试以下方法：

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

- Saurabh Mistry