ブートストラップモーダル：関数ではありません

ページにモーダルがあります。ウィンドウが読み込まれるときにそれを呼び出そうとすると、コンソールに次のエラーが表示されます：

$(...).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がコードで複数回宣言されている場合にも表示されることがあります。2番目の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. 場合によっては、スクリプトがまだ到達していない要素にアクセスしようとすると、エラーが発生します。ブートストラップはjQueryに依存するため、jQueryを最初に参照する必要があります。したがって、jquery.min.jsを呼び出してからbootstrap.min.jsを呼び出す必要があります。さらに、ブートストラップモーダルエラーは、実際には、モーダル関数を呼び出す前にブートストラップのJavaScriptを含めなかったことが原因です。モーダルはjQueryではなくbootstrap.jsで定義されます。したがって、スクリプトはこの方法で含める必要があります

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

2. jQueryのインスタンスが複数ある場合、2番目のjQuery宣言により、bootstrap.jsが正しく機能しません。jQuery.noConflict();モーダルポップアップを呼び出す前に利用してください

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

   のようなjQueryイベントエイリアス.load、.unloadまたは.errorjQuery 1.8以降非推奨。

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

   または、モーダルポップアップを直接開いてみてください

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

スクリプトの順序を変更する

ブートストラップはjqueryプラグインなので、jqueryを実行する必要があるため

importステートメントの変更が機能しました。から

import * as $ from 'jquery';

に：

declare var $ : any;

走る

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>

body。終了タグの直前のindex.html内。

また、Angular 2-7を実行している場合は、tsconfig.app.jsonファイルのタイプフィールドに「jquery」を含めます。

これにより、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');

HTTPSではなくHTTPでjqueryをインポートしただけで問題が発生しました（本番はHTTPSです）

パーティーには少し遅れますが、重要な注意事項があります。

スクリプトは正しい順序になっている可能性がありますが、asyncスクリプトタグ内のに注意してください（このように）

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

これが問題の原因である可能性があります。特に、これasyncを本番環境専用に設定している場合、これは理由が非常にイライラすることがあります。

これを解決するのに苦労し、読み込み順序を確認し、バンドルによってjQueryが2回含まれているかどうかを確認しましたが、それが原因ではないようです。

最後に、次の変更を加えて修正しました。

（前）：

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

（後）：

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

ここで答えを見つけました：https : //github.com/ColorlibHQ/AdminLTE/issues/685

以下を含める必要があります。

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