bootstrap modal no es una función

Question

Estoy usando el cuadro de diálogo modal Twitter bootstrap. y funciona bien mientras que sólo abrirla con

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

Pero cuando intento algo así como

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

me sale un error de JavaScript:

bootstrap modal is not a function

otra parte. Por lo que entiendo, el enlace con .close debe cerrar la ventana y no lo hace. ¿Qué hago mal?

Answer 1

No sé si ha descubierto este problema o no, fue hace un par de meses cuando hizo la pregunta, pero me encontré con el mismo problema y tenía que ver con un conflicto con otro complemento, entonces publicaré la solución para futuras consultas.

Aquí hay un ejemplo de lo que hice para solucionar este problema.

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

Answer 2

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

¿Es 'rules' la id de su modal? porque podemos usar métodos .modal solo con el div que tiene la clase 'modal'.

y teniendo en cuenta que

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

esto está funcionando bien y en este hay que utilizar el ID 'mi-modal para el modal.

Answer 3

probablemente un conflicto de espacio de nombres, sólo tiene que hacer esto ...

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

Answer 4

Asegúrese de que no va a cargar varios archivos de jQuery desde múltiples ubicaciones, local o remoto.

Answer 5

que resuelven este problema quitando el siguiente código:

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

Lo que significa bootbox alguna manera entra en conflicto con la ventana emergente modal de arranque.

Answer 6

Añadir jQuery.noConflict() dentro de $(document).ready(function(){}) puede estar ayudando también.

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

Answer 7

una de las formas más concisas para evitar estos conflictos es:

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

como se muestra en:

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