引导程序模式：不是函数

我的页面上有一个模式。当我尝试在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>

我该如何解决这个问题？

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

<!-- 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依赖于jQuery：

插件依赖

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

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

问题是由于拥有jQuery实例不止一次。如果您使用许多具有jQuery多重实例的文件，请当心。只需保留jQuery的1个实例，您的代码即可使用。

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

jQuery应该是第一个：

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

TypeError的原因：$（…）.modal不是函数：

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

解决方案：

1. 如果脚本试图访问尚未到达的元素，那么您将得到一个错误。Bootstrap依赖于jQuery，因此必须首先引用jQuery。因此，必须先调用jquery.min.js，再调用bootstrap.min.js，然后再启动bootstrap Modal错误实际上是由于在调用模态函数之前不包括bootstrap的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>

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 () {
         ...
   });

更改脚本的顺序

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

更改导入声明有效。从

import * as $ from 'jquery';

至：

declare var $ : any;

跑

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

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

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中，紧接在body结束标记之前。

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

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

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

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

我分享对谁的关注。

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

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

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

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

用：

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

该问题仅在生产中就发生了，只是因为我使用HTTP而不是HTTPS导入了jquery（生产是HTTPS）

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

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

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

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

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

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

（之前）：

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

（后）：

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

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

您必须包括：

bootstrap.min.css
jquery.min.js
bootstrap.min.js