modal bootstrap non è una funzione

Question

Sto utilizzando la finestra di dialogo di avvio di avvio di twitter. e funziona benissimo mentre solo aprirlo con

<a class="btn" data-controls-modal="my-modal" >Launch Modal</a> 

Ma quando provo qualcosa come

$('#close_popup').click(function(){ 
    $('#rules').modal('toggle');  
}); 

ottengo un errore di javascript:

bootstrap modal is not a function

Inoltre. Per quanto ho capito, il collegamento con .close deve chiudere la finestra e non lo fa. Cosa faccio di sbagliato?

Answer 1

Non so se hai risolto questo problema o non lo era un paio di mesi fa quando hai posto la domanda, ma ho trovato lo stesso problema e aveva a che fare con un conflitto con un altro plugin, quindi posterò la soluzione per future richieste.

Ecco un esempio di ciò che ho fatto per risolvere questo problema.

function ShowImageInModal(path) { 
    jQuery.noConflict(); 
    (function ($) { 
     $('#modalImage').removeAttr("src").attr("src", path); 
     $('#myModal').modal('show'); 
    } 
    )(jQuery); 
} 

Answer 2

$('#rules').modal('toggle'); 

"rules" è l'id del tuo modal ?? perché possiamo usare i metodi .modal solo con il div che ha la classe 'modale'.

e dato che

<a class="btn" data-controls-modal="my-modal" >Launch Modal</a> 

questo sta lavorando bene e in questo si deve utilizzare id 'my-modale' per il modale.

Answer 3

probabilmente un conflitto namespace, è sufficiente fare questo ...

jQuery(document).ready(function($) { 
    $('#myModal').modal('toggle'); 
}); 

Answer 4

Assicurarsi che non caricare più file jquery da più posizioni, locale o remoto.

Answer 5

ho risolto questo problema rimuovendo il seguente codice:

<div class="modal fade" id="myModal" 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"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
       <h4 class="modal-title" id="myModalLabel">Feed Selection</h4> 
      </div> 
      <div class="modal-body"> 
      </div> 
      <div class="modal-footer"> 
       <!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> --> 
       <button type="button" id="feedsave" class="btn btn-primary">Save changes</button> 
      </div> 
     </div> 
    </div> 
</div> 

Il che significa bootbox in qualche modo in conflitto con il popup modale bootstrap.

Answer 6

Aggiungi jQuery.noConflict() all'interno di $(document).ready(function(){}) può essere d'aiuto.

$(document).ready(function(){ 
    jQuery.noConflict(); 
}); 

Answer 7

uno dei modi più concise per evitare questi conflitti è:

<script src="jquery.js"></script> 
<script src="prototype.js"></script> 
<script> 
jQuery(function($){ 
// Your jQuery code here, using the $ 
}); 
</script> 

come mostrato in:

http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/