twitter bootstrap - ejemplos - Bootstrap Modal desaparece inmediatamente

modal bootstrap ejemplos

Question

Estoy trabajando en un sitio web usando bootstrap.

Básicamente, quería usar un modal en la página de inicio, convocado por el botón en la Unidad Hero.

Código del botón:

<button type="button" 
    class="btn btn-warning btn-large" 
    data-toggle="modal"
    data-target="#myModal">Open Modal</button>

Código modal:

<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">In Costruzione</h3>
  </div>
  <div class="modal-body">
    <p>Test Modal: Bootstrap</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Chiudi</button>
    <button class="btn btn-warning">Salva</button>
  </div>
</div>

El problema es que tan pronto como hago clic en el botón, el modal se desvanece y luego desaparece de inmediato.

Agradecería cualquier ayuda.

Además, ¿cómo cambiar el color del triángulo desplegable (apuntando hacia arriba, sin desplazamiento)? Estoy trabajando en un sitio web basado en naranja y marrón, y esa cosa azul es realmente molesta.

Answer 1

Una causa probable

Este es un comportamiento típico para cuando el JavaScript del complemento Modal se carga dos veces. Verifique para asegurarse de que el complemento no se cargue por duplicado. Dependiendo de la plataforma que esté utilizando, el código modal podría cargarse desde un número de fuentes. Algunos de los más comunes son:

• bootstrap.js (el conjunto completo de BootStrap JS)
• bootstrap.min.js (igual que el anterior, solo minificado)
• bootstrap-modal.js (el complemento independiente)
• un cargador de dependencias, por ejemplo, require(''bootstrap'')

Consejos para depurar

Un buen lugar para comenzar es inspeccionar los detectores de eventos de click registrados utilizando las herramientas de desarrollador en su navegador. Chrome, por ejemplo, listará el archivo fuente JS donde se puede encontrar el código para registrar el oyente. Otra opción es intentar buscar en las fuentes de la página una frase encontrada en el código modal, por ejemplo, var Modal .

Desafortunadamente, estos no siempre encontrarán cosas en todos los casos. Inspeccionar las solicitudes de red puede ser un poco más robusto al darle una imagen de todo lo que se carga en una página.

Una demostración (rota)

Aquí hay una demostración de lo que sucede cuando carga tanto bootstrap.js como bootstrap-modal.js (solo para confirmar su experiencia):

Plunker

Si se desplaza hacia abajo hasta la parte inferior de la fuente en esa página, puede eliminar o comentar la línea <script> de bootstrap-modal.js y luego verificar que ahora el modal funcionará como se esperaba.

Answer 2

Busqué por un tiempo una referencia de bootstrap duplicada en mi aplicación mvc, después de las otras respuestas útiles sobre esta pregunta.

Finalmente lo encontré - estaba incluido en otra biblioteca que estaba usando, ¡así que no era para nada obvio! ( datatables.net ).

Si sigues teniendo este problema, busca otras bibliotecas que puedan incluir bootstrap para ti. ( datatables.net permite especificar una descarga con o sin bootstrap; otros hacen lo mismo).

Así que bundle.config el bundle.config bootstrap.min.js de mi bundle.config y todo funcionó bien.

Answer 3

El mismo síntoma, en el contexto de una aplicación de Rails con Bootstrap proporcionada por la gema bootstrap-sass , y la respuesta de @ merv me puso en el camino correcto.

Mi archivo application.js tenía lo siguiente:

//= require bootstrap
//= require bootstrap-sprockets

La solución fue eliminar una de las dos líneas. De hecho, el léame de la gema te advierte sobre este error. Mi error.

Answer 4

El problema también puede ocurrir si al usar jquery adjuntas un detector de eventos dos veces. Por ejemplo, establecerías sin desvincular:

            $("body").on("click","#fixerror",function(event){
                $("#fixerrormodal").modal(''toggle'')
            })

Si esto sucede, el evento se dispara dos veces seguidas y el modal desaparece.

            $("body").on("click","#fixerror",function(event){
                $("#fixerrormodal").modal()
                $("#fixerrormodal").modal(''toggle'')
            })

Ver ejemplo: http://embed.plnkr.co/i5xB1WbX7zgXrbDMhNAW/preview

Answer 5

En mi caso tengo el botón actionlink en mvc y me he enfrentado a este problema, he intentado muchas soluciones arriba y otras, pero todavía estoy enfrentando ese problema, entonces me doy cuenta de mi error en el código.

He llamado modal en javascript mediante el uso de

 $(''#ModalId'').modal(''show'');

Antes del error i usando este botón

<a href="" onclick="return Edit();" class="btn btn-primary">Edit</a>

No tengo ningún valor para la propiedad href en este botón, así que me enfrento al problema.

Luego edito este código de botón como este

 <a href="#" onclick="return Edit();" class="btn btn-primary">Edit</a>

luego se soluciona el problema simplemente como un error debido a que no # en la primera.

mira si esto te será útil.

Answer 6

En mi caso, solo tenía un archivo bootstrap.js, jquery.js incluido, pero seguía recibiendo ese tipo de error, y mi código para el botón era algo como esto:

<script type="text/javascript">
$(document).ready(function(){
   $("#bttn_<?php echo $rnt[''id''];?>").click(function(){
      $("#myModal_<?php echo $rnt[''id''];?>").modal(''show'');
   });
});
</script>

Yo simple agregué e.preventDefault (); a eso y funcionó como el encanto.

Entonces, mi nuevo código fue como a continuación:

<script type="text/javascript">
$(document).ready(function(){
  e.preventDefault();
  $("#bttn_<?php echo $rnt[''id''];?>").click(function(){
     $("#myModal_<?php echo $rnt[''id''];?>").modal(''show'');
  });
});
</script>

Answer 7

En mi caso, tuve el CDN incluido en la cabecera de application.html.erb y también instalé la gema ''jquery-rails'', que supongo que gracias a la documentación y publicaciones anteriores, es redundante.

Simplemente comenté el CDN (abajo) desde el encabezado de application.html.erb y el modal permanece apropiadamente abierto.

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

Answer 8

En mi caso, un clic en un botón provoca una recarga (no deseada) de la página.

Aquí está mi solución:

<button class="btn btn-success" onclick="javascript: return false;" 
data-target="#modalID" data-toggle="modal">deaktivieren</button>

Answer 9

Estaba enfrentando el mismo problema durante las pruebas en dispositivos móviles y este truco funcionó para mí

<a type="submit" class="btn btn-primary" data-toggle="modal" href="#myModal">Submit</a> 

Cambie el botón a la etiqueta de anclaje, debería funcionar, el problema ocurre debido a su botón de tipo, ya que está tratando de enviarlo, por lo que el modal desaparece inmediatamente. Y también eliminar ocultar de modal ocultar fade dar <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> Espero que esto funcione para ti.

Answer 10

Hoy me encontré con este problema y resultó ser solo en Chrome. Lo que me hizo darme cuenta de que podría ser un problema de renderizado. Mover el modal específico a su propia capa de renderización lo resolvió.

#myModal {
  -webkit-transform: translate3d(0, 0, 0);
}

Answer 11

Me encontré con el mismo síntoma que @gpasse mostró en su ejemplo. Aquí estaba mi código ...

<form...>
  <!-- various inputs with form submit --->

  <!-- button opens modal to show dynamic info -->
  <button id="myButton" class="btn btn-primary">Show Modal</button>
</form>

<div id="myModal" class="modal fade" ...>
</div>

<script>
  $( ''#myButton'' ).click( function() {
    $( ''#myModal'' ).modal();
  )};
</script>

Como sugirió @Bhargav, mi problema se debió al botón que intentaba enviar el formulario y volver a cargar la página. Cambié el botón a un enlace <a> siguiente manera:

<a href="#" id="myButton" class="btn btn-primary">Show Modal</a>

... y solucionó el problema.

NOTA: No tengo suficiente reputación para simplemente agregar un comentario o un voto positivo aún, y sentí que podía agregar un poco de aclaración.

Answer 12

Mi código de alguna manera tenía el bootstrap.min.js incluido dos veces. Eliminé uno de ellos y todo funciona bien ahora.

Answer 13

Para mí, lo que funcionó fue eliminar

data-toggle="modal"

desde el botón. El botón en sí puede ser cualquier elemento: un enlace, div, botón, etc.

Answer 14

Sé que esto es viejo, pero hay otra cosa que debes verificar: asegúrate de que solo tienes un atributo de datos = objetivo. Lo había duplicado y el resultado fue según este hilo.

Answer 15

Tenía el mismo problema pero tenía una causa diferente. Seguí la documentación y creé un botón como ese:

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

Cuando hice clic en él, pareció que no pasaría nada. Sin embargo, el botón estaba en una <form> que estaba temporalmente buscando la misma página.

Lo arreglé agregando type="button" al elemento button, para que no envíe el formulario cuando se hace clic.

Answer 16

Tuve el mismo problema al trabajar en un proyecto con asp.NET. Estaba usando bootstrap 3.1.0 y lo he actualizado a Bootstrap 2.3.2.

Answer 17

Tuve el mismo problema también. El problema era que estaba mostrando el modal al presionar un enlace y pedir confirmación con jquery.

El siguiente código muestra el modal y desapareció inmediatamente:

<a href="" onclick="do_some_stuff()">Hey</a>

Terminé agregando ''#'' a href para que el enlace no vaya a ninguna parte y solucione mi problema.

<a href="#" onclick="do_some_stuff()">Hey</a>

Answer 18

Yo también tenía el mismo problema, pero para mí estaba sucediendo porque tenía un botón con el tipo "enviar" dentro del formulario modal. Cambié

    <input  type=''submit'' name=''submitname'' id="partyBtn" value=''Submit'' title=''Click to submit.''/>

a

    <input  type=''button'' name=''submitname'' id="partyBtn" value=''Submit'' title=''Click to submit.''/>

Y eso solucionó el problema de la desaparición.

Answer 19

Yo también tuve el problema, si el botón está dentro de un etiqueta, el modal aparece una vez y desaparece lo suficientemente rápido, sacando el botón del formulario que se arregló. Gracias terminé en este hilo! +1 a todos.

Answer 20

e.preventDefault(); con jquery ui

Para mí, este problema ocurrió con el método de clic anular en un botón de jquery ui, causando una recarga de página al hacer clic de forma predeterminada.

Answer 21

modal.js bootstrap a mi proyecto mediante bower , luego modal.js el archivo bootstrap.min.js y luego el archivo modal.js . (El botón que abre el modal está dentro de un formulario). Acabo de eliminar la importación de modal.js y funciona para mí.