Javascript Bootstrap 模式：不是函数

Bootstrap modal: is not a function

提问by godheaper

I have a modal in my page. When I try to call it when the windows load, it prints an error to the console that says :

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

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

This is my Modal HTML :

这是我的模态 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>

And this is my JavaScript to run it with when a window is loaded :

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

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

How can I fix this problem?

我该如何解决这个问题？

回答by Ionic? Biz?u

You have an issue in scripts order. Load them in this order:

您的脚本顺序有问题。按以下顺序加载它们：

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

Why this? Because Bootstrap JS depends on jQuery:

为什么这个？因为Bootstrap JS 依赖于 jQuery：

Plugin dependencies

Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery(this means jQuery must be included before the plugin files).

插件依赖

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

回答by Nurp

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.

如果在您的代码中多次声明 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>

回答by Juan Camilo Colmenares Rocha

The problem is due to having jQuery instances more than one time. Take care if you are using many files with multiples instance of jQuery. Just leave 1 instance of jQuery and your code will work.

问题是由于 jQuery 实例不止一次。如果您使用具有多个 jQuery 实例的多个文件，请小心。只需留下 1 个 jQuery 实例，您的代码就可以工作了。

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

回答by dashtinejad

jQuery should be the first:

jQuery 应该是第一个：

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

回答by N?s????? ?

Causes for TypeError: $(…).modal is not a function:

TypeError 的原因：$(...).modal 不是函数：

1. Scripts are loaded in the wrong order.
2. Multiple jQuery instances

1. 脚本以错误的顺序加载。
2. 多个 jQuery 实例

Solutions:

解决方案：

1. In case, if a script attempt to access an element that hasn't been reached yet then you will get an error. Bootstrap depends on jQuery, so jQuery must be referenced first. So, you must be called the jquery.min.js and then bootstrap.min.js and further the bootstrap Modal error is actually the result of you not including bootstrap's javascript before calling the modal function. Modal is defined in bootstrap.js and not in jQuery. So the script should be included in this manner

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

2. In case if there are multiple instances of jQuery, the second jQuery declaration prevents bootstrap.js from working correctly. so make use of jQuery.noConflict();before calling the modal popup

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

   jQuery event aliases like .load, .unloador .errordeprecated since jQuery 1.8.

   $(window).on('load', function(){ 
         $('#prizePopup').modal('show');
   });
   

   OR try opening the modal popup directly

   $('#prizePopup').on('shown.bs.modal', function () {
         ...
   });
   

1. 万一，如果脚本尝试访问尚未到达的元素，那么您将收到错误消息。Bootstrap 依赖于 jQuery，所以必须先引用 jQuery。因此，您必须先调用 jquery.min.js，然后调用 bootstrap.min.js，并且进一步的 bootstrap Modal 错误实际上是您在调用 modal 函数之前没有包含 bootstrap 的 javascript 的结果。Modal 是在 bootstrap.js 中定义的，而不是在 jQuery 中定义的。所以脚本应该以这种方式包含

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

2. 如果有多个 jQuery 实例，第二个 jQuery 声明会阻止 bootstrap.js 正常工作。所以jQuery.noConflict();在调用模态弹出窗口之前使用

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

   jQuery 事件别名，如.load，.unload或.error自 jQuery 1.8 起弃用。

   $(window).on('load', function(){ 
         $('#prizePopup').modal('show');
   });
   

   或尝试直接打开模态弹出窗口

   $('#prizePopup').on('shown.bs.modal', function () {
         ...
   });
   

回答by Vitorino fernandes

change the order of the script

改变脚本的顺序

Because bootstrap is a jquery plugin so it require Jquery to execute

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

回答by ranjeet8082

Changing import statement worked. From

更改导入语句有效。从

import * as $ from 'jquery';

to:

到：

declare var $ : any;

回答by cyperpunk

Run

跑

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

in the project to add the jquery types in your Angular Project. After that include

在项目中添加 jquery 类型到你的 Angular 项目中。之后包括

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

in your app.module.ts

在你的 app.module.ts

Add

添加

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

in your index.html just before the body closing tag.

在 index.html 中，就在 body 结束标记之前。

And if you are running Angular 2-7 include "jquery" in the types field of tsconfig.app.json file.

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

This will remove all error of 'modal' and '$' in your Angular project.

这将消除 Angular 项目中“modal”和“$”的所有错误。

回答by Hien Nguyen

I meet this error when integrate modal bootstrap in angular.

在 angular 中集成模态引导程序时，我遇到了这个错误。

This is my solution to solve this issue.

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

I share for whom concern.

我分担为谁关心。

First step you need install jqueryand bootstrapby npmcommand.

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

Second you need add declare var $ : any;in component

其次你需要添加declare var $ : any;组件

And use can use $('#myModal').modal('hide');on onSave() method

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

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

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

回答by WeekendHacker

Struggled to solve this one, checked the load order and if jQuery was included twice via bundling, but that didn't seem to be the cause.

努力解决这个问题，检查加载顺序，如果 jQuery 通过捆绑包含两次，但这似乎不是原因。

Finally fixed it by making the following change:

最后通过进行以下更改来修复它：

(before):

（前）：

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

(after):

（后）：

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

Found the answer here: https://github.com/ColorlibHQ/AdminLTE/issues/685

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