Question

我的页面中有一个模态。当我在Windows加载时尝试调用它时，它会向控制台输出一条错误：

$(...).modal is not a function

这是我的模态HTML：

<div class="modal fade" id="prizePopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
                This Modal title
            </h4>
        </div>
        <div class="modal-body">
            Add some text here
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">
                Submit changes
            </button>
        </div>
    </div>
</div>

<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

这是我在加载窗口时运行它的JavaScript：

<script type="text/javascript">
$(window).load(function() {
    $('#prizePopup').modal('show');
});
</script>

如何解决此问题？

Answer 1

您在脚本顺序中遇到问题。按以下顺序加载它们：

<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- BS JavaScript -->
<script type="text/javascript" src="js/bootstrap.js"></script>
<!-- Have fun using Bootstrap JS -->
<script type="text/javascript">
$(window).load(function() {
    $('#prizePopup').modal('show');
});
</script>

为什么这样？因为Bootstrap JS depends on jQuery：

插件依赖项

某些插件和CSS组件依赖于其他插件。如果单独包含插件，请确保在文档中检查这些依赖项。 另请注意，所有插件都依赖于jQuery （这意味着 jQuery必须包含在插件文件之前）。

Answer 2

如果在代码中多次声明jQuery，也可能会显示此警告。第二个jQuery声明阻止bootstrap.js正常工作。

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
...
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

Answer 3

问题是由于jQuery实例不止一次。如果您使用多个jQuery实例的文件，请注意。只留下1个jQuery实例，你的代码就可以了。

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

Answer 4

jQuery应该是第一个：

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>

Answer 5

更改脚本的顺序

因为bootstrap是一个jquery插件所以它需要Jquery来执行

Answer 6

造成TypeError的原因：$（...）。modal不是函数：

脚本加载顺序错误。
多个jQuery实例

解决方案：

以防万一，如果脚本尝试访问尚未被访问的元素到了，那么你会得到一个错误。 Bootstrap取决于jQuery，因此必须先引用jQuery。因此，您必须称为 jquery.min.js，然后是bootstrap.min.js，进一步引导模态错误实际上是您之前未包含引导程序javascript的结果调用模态函数。模态定义在 bootstrap.js，而不是jQuery。因此应该以这种方式包含脚本
```
   <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
   <script type="text/javascript" src="js/bootstrap.js"></script>
```
如果有多个jQuery实例，则第二个jQuery 声明阻止bootstrap.js正常工作。所以利用 jQuery.noConflict();，然后再调用模式弹出窗口
```
jQuery.noConflict();
$('#prizePopup').modal('show');
```
自.load，.unload或.error之类的jQuery事件别名自jQuery 1.8起就已弃用。
```
$(window).on('load', function(){ 
      $('#prizePopup').modal('show');
});
```
或尝试直接打开模式弹出窗口
```
$('#prizePopup').on('shown.bs.modal', function () {
      ...
});
```

Answer 7

使用：

jQuery.noConflict();
$('#prizePopup').modal('toggle');

Answer 8

更改导入语句有效。来自

import * as $ from 'jquery';

收件人：

declare var $ : any;

Answer 9

努力解决这一问题，检查了加载顺序，并且是否通过捆绑将jQuery包含两次，但这似乎不是原因。

最后通过进行以下更改将其修复：

（之前）：

$('#myModal').modal('hide');

（之后）：

window.$('#myModal').modal('hide');

在这里找到答案：https://github.com/ColorlibHQ/AdminLTE/issues/685

Answer 10

当将模式引导程序集成到angular中时遇到此错误。

这是我解决此问题的方法。

我分享关注的人。

第一步，您需要通过jquery命令安装bootstrap和npm。

第二步，您需要在组件中添加declare var $ : any;

并且可以在onSave（）方法上使用$('#myModal').modal('hide');

演示https://stackblitz.com/edit/angular-model-bootstrap-close?file=src/app/app.component.ts

Answer 11

The problem happened to me just in production just because I imported jquery with HTTP and not HTTPS (and production is HTTPS)

Answer 12

我参加聚会有点晚了，但是有一个重要的注意事项：

您的脚本可能顺序正确，但是请注意脚本标签中的所有async（例如这样）

<script type="text/javascript" src="js/bootstrap.js" async></script>

这可能是导致问题的原因。尤其是如果您仅在生产环境中设置了async，则可能会因此而感到沮丧。

Answer 13

运行

npm i @types/jquery
npm install -D @types/bootstrap

在项目中

在Angular Project中添加jquery类型。之后，包括

import * as $ from "jquery";
import * as bootstrap from "bootstrap";

在您的app.module.ts

中

添加

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

在index.html中，紧接在正文结束标记之前。

如果您正在运行Angular 2-7，则在tsconfig.app.json文件的types字段中包括“ jquery ”。

这将删除Angular项目中的所有'modal'和'$'错误。

Answer 14

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

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

`import "./../bower/bootstrap/js/modal.js"; // or import ".../bootstrap.min.js"`

Answer 15

就我而言...我缺少bootstrap.js：）

Answer 16

必须包含

bootstrap.min.css
jquery.min.js
bootstrap.min.js
。我正在使用引导程序模型

Bootstrap模态：不是一个函数

16 个答案:

插件依赖项