Bootstrap modal: non è una funzione

Ho un modale nella mia pagina. Quando provo a chiamarlo quando si carica Windows, stampa un errore sulla console che dice:

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

Questo è il mio HTML modale:

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

E questo è il mio JavaScript con cui eseguirlo quando viene caricata una finestra:

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

Come posso risolvere questo problema?

Hai un problema nell'ordine degli script. Caricali in questo ordine:

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

Perchè questo? Poiché Bootstrap JS dipende da jQuery :

Dipendenze dei plugin

Alcuni plugin e componenti CSS dipendono da altri plugin. Se includi i plug-in singolarmente, assicurati di controllare queste dipendenze nei documenti. Nota anche che tutti i plugin dipendono da jQuery (questo significa che jQuery deve essere incluso prima dei file del plugin ).

Questo avviso può essere visualizzato anche se jQuery viene dichiarato più di una volta nel codice. La seconda dichiarazione jQuery impedisce a bootstrap.js di funzionare correttamente.

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

Il problema è dovuto alla presenza di istanze jQuery più di una volta. Fai attenzione se stai usando molti file con istanze multiple di jQuery. Basta lasciare 1 istanza di jQuery e il tuo codice funzionerà.

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

jQuery dovrebbe essere il primo:

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

Cause di TypeError: $ (…) .modal non è una funzione:

1. Gli script vengono caricati nell'ordine sbagliato.
2. Istanze multiple di jQuery

soluzioni:

1. Nel caso in cui, se uno script tenta di accedere a un elemento che non è stato ancora raggiunto, verrà visualizzato un errore. Bootstrap dipende da jQuery, quindi è necessario prima fare riferimento a jQuery. Quindi, devi essere chiamato jquery.min.js e quindi bootstrap.min.js e inoltre l'errore modale di bootstrap è in realtà il risultato di non aver incluso il javascript di bootstrap prima di chiamare la funzione modale. Modal è definito in bootstrap.js e non in jQuery. Quindi lo script dovrebbe essere incluso in questo modo

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

2. Nel caso in cui siano presenti più istanze di jQuery, la seconda dichiarazione jQuery impedisce a bootstrap.js di funzionare correttamente. quindi usalo jQuery.noConflict();prima di chiamare il popup modale

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

   alias eventi jQuery piace .load, .unloado .errordeprecate da jQuery 1.8.

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

   O prova ad aprire direttamente il popup modale

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

modificare l'ordine dello script

Poiché bootstrap è un plugin jquery quindi richiede l'esecuzione di Jquery

La modifica dell'istruzione di importazione ha funzionato. A partire dal

import * as $ from 'jquery';

per:

declare var $ : any;

Correre

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

nel progetto per aggiungere i tipi di jquery nel tuo progetto angolare. Dopo di che includi

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

nella tua app.module.ts

Inserisci

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

nel tuo index.html appena prima del tag di chiusura del corpo.

E se stai eseguendo Angular 2-7 includi " jquery " nel campo dei tipi del file tsconfig.app.json.

Questo rimuoverà tutti gli errori di "modal" e "$" nel tuo progetto Angular.

Incontro questo errore quando integro il bootstrap modale in angular.

Questa è la mia soluzione per risolvere questo problema.

Condivido per chi preoccupazione.

Il primo passaggio è necessario installare jquerye bootstraptramite npmcomando.

Secondo è necessario aggiungere un declare var $ : any;componente

E l'uso può usare $('#myModal').modal('hide');sul metodo onSave ()

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

Uso:

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

Il problema mi è capitato solo in produzione solo perché ho importato jquery con HTTP e non HTTPS (e la produzione è HTTPS)

Sono un po 'in ritardo alla festa, tuttavia c'è una nota importante:

I tuoi script potrebbero essere nell'ordine giusto ma asyncfai attenzione a eventuali messaggi di posta elettronica nel tag script (come questo)

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

Ciò potrebbe causare il problema. Soprattutto se hai questo asyncset solo per ambienti di produzione, questo può diventare davvero frustrante da ragionare.

Ha lottato per risolvere questo problema, ha controllato l'ordine di caricamento e se jQuery è stato incluso due volte tramite bundling, ma non sembra essere quella la causa.

Infine risolto il problema apportando la seguente modifica:

(prima):

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

(dopo):

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

Ho trovato la risposta qui: https://github.com/ColorlibHQ/AdminLTE/issues/685

Devi includere:

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