Bootstrap: TypeError: $ (...) modale non è una funzione

Ho provato a chiamare modale bootstrap da jQuery e continuo a ricevere questo messaggio di errore:.

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

Ecco il mio codice:

<button id="btnTest" class="btn btn-default">Show Modal</button> 
<div id="dummyModal" role="dialog" class="modal fade"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" data-dismiss="modal" class="close">&times;</button> 
      <h4 class="modal-title">Error</h4> 
     </div> 
     <div class="modal-body"> 
      <p>Quick Brown Fox Jumps Over The Lazy Dog</p> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" data-dismiss="modal" class="btn btn-default">Close</button> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 
<script type="text/javascript" src="/js/jquery-1.11.3.js"></script> 
<script type="text/javascript" src="/js/bootstrap.js"></script> 
<script type="text/javascript"> 
    $('document').ready(function() { 
    $('#btnTest').click(function() { 
     $('#dummyModal').modal('show'); 
    }); 
    }); 
</script>

FYI, io uso bootstrap 3.3.5 e jquery 1.11.3. ho provato jQuery.noConflict(); ... etc da this thread ma ancora senza fortuna. Ecco il complete code

fonte

2015-09-01 sad301

Perché stai usando jQuery 1.x? Supporto IE? –

I file javascript sono caricati correttamente? – dvhh

Ad ogni modo, hai letto [questo] (http://getbootstrap.com/javascript/)? C'è una parte sulle modali ... –

Utilizzare questo. Funzionerà. Ho usato bootstrap 3.3.5 e jquery 1.11.3

$('document').ready(function() { 
 
    $('#btnTest').click(function() { 
 
    $('#dummyModal').modal('show'); 
 
    }); 
 
});

body { 
 
    background-color: #eee; 
 
    padding-top: 40px; 
 
    padding-bottom: 40px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width,initial-scale=1"> 
 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    <title>Modal Test</title> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <button id="btnTest" class="btn btn-default">Show Modal</button> 
 
    <div id="dummyModal" role="dialog" class="modal fade"> 
 
     <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
      <button type="button" data-dismiss="modal" class="close">&times;</button> 
 
      <h4 class="modal-title">Error</h4> 
 
      </div> 
 
      <div class="modal-body"> 
 
      <p>Quick Brown Fox Jumps Over The Lazy Dog</p> 
 
      </div> 
 
      <div class="modal-footer"> 
 
      <button type="button" data-dismiss="modal" class="btn btn-default">Close</button> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
</body> 
 

 
</html>

fonte

2015-09-01 08:12:52

Yup, questo funziona grazie: D – sad301

Funziona nella versione jQuery - 1.7.1 min.js? – Siva

-1

Se si utilizza qualsiasi layout di pagina, allora, spostare le sezioni di script dal basso a testa sezione layout di pagina. bcz, i file javascript devono essere caricati prima. Questo ha funzionato per me

fonte

2016-06-10 08:30:49

Questa risposta è troppo sbagliata. Javascript NON deve essere caricato prima. – rochasdv

Siamo spiacenti, se desideri utilizzare la funzione modale in jquery, devi prima caricare il file jquery. Come può essere sbagliato? –

Ho capito, il problema con gli script di scrittura in testa a una pagina sta bloccando. Il browser deve interrompere l'elaborazione della pagina finché lo script non viene scaricato, analizzato ed eseguito. La ragione di ciò è abbastanza chiara, questi script potrebbero inserire più nella pagina cambiando il risultato del rendering, possono anche rimuovere cose che non devono essere renderizzate, ecc. Ma a volte c'è bisogno di caricare alcuni script prima di caricare la pagina, ma per queste occasioni vorrei cercare un modo per caricare questi script in modo asincrono – rochasdv

Ho anche dovuto affrontare lo stesso errore quando stavo cercando di chiamare il modal bootstrap da jQuery. Ma questo accade perché stiamo usando modale bootstrap e per questo abbiamo bisogno di collegare bootstrap.min.js una CDN che è

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Spero che questo vi aiuterà, come mi mancava che quando ho cercato di chiamare modale bootstrap da jQuery utilizzando

$('#button').on('click',function(){ $('#myModal').modal(); });

myModal è l'ID di Bootstrap modali e si deve dare un evento click a un pulsante quando si chiama fare clic su tale pulsante un pop up modale sarà visualizzato.

fonte

2017-02-14 13:13:11

Bootstrap: TypeError: $ (...) modale non è una funzione

risposta

Problemi correlati