Bootstrap Modal desaparece inmediatamente

204

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 de Héroe.

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

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.

gorokizu
fuente
1
puedes ir a twitter.github.com/bootstrap y seguir sus ejemplos.
Maurício Giordano
2
Lo hice funcionar usando onClick = "$ ('# myModal'). Modal ()" en la etiqueta del botón.
gorokizu
utilizó su enfoque: onClick = "$ ('# myModal'). modal ()"
nikolai.serdiuk

Respuestas:

468

Una causa probable

Este es el comportamiento típico cuando el JavaScript para el complemento modal se carga dos veces. Verifique para asegurarse de que el complemento no se esté cargando dos veces. Dependiendo de la plataforma que esté utilizando, el código modal podría cargarse desde varias fuentes. Algunos de los comunes son:

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

Consejos de depuración

Un buen lugar para comenzar es inspeccionar a los clickoyentes de eventos registrados utilizando las herramientas de desarrollador en su navegador. Chrome, por ejemplo, enumerará el archivo fuente JS donde se puede encontrar el código para registrar al oyente. Otra opción es tratar de buscar las fuentes en la página de una frase que se encuentra 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 para darle una imagen de todo lo cargado en una página.

Una demostración (rota)

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

Saqueador

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

merv
fuente
44
esto funcionó para mí, eliminé bootstrap.js y dejé bootstrap.min.js en. +1
Daniel Sun Yang
1
Lo que me pasó es que declaró bootstrap.js en <head> </head> y debajo de <footer> </footer>
eliminé
@PrinceTyke tenías razón, la url de bootstrap-modal.js estaba obsoleta y solo una se estaba cargando (haciendo que funcionara). Lo arreglé para que se rompa de nuevo.
merv
esto también sucede si coloca dos "bootstrap.js" al mismo tiempo, en la misma página
Leandro RR
1
Sin embargo, para mí esto fue el problema, porque estaba usando esto junto con la agrupación de ASP.NET, que le permite especificar una dirección CDN para los servidores implementados, lo que significa que mi servidor de implementación estaba teniendo este problema, pero mi desarrollador estaba bien. Así que asegúrese de haber eliminado el bootstrapping del CDN que ofrecen en su sitio web para evitar esto.
Worthy7
85

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

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

Cuando hice clic, parecía que no pasaría nada. Sin embargo, el botón estaba en un <form>que temporalmente solo estaba recuperando la misma página.

Arreglé esto agregando type="button"al elemento del botón, para que no envíe el formulario al hacer clic.

Rory Hunter
fuente
Tenía dos bibliotecas bootstrap.js y bootstrap-editable.js, pensé que eran la misma biblioteca, así que eliminé la primera y ahora todo funciona.
Fedeco
25

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.

miCRoSCoPiC_eaRthLinG
fuente
1
Este es el que funcionó para mí. No estoy completamente seguro de por qué, ya que el resto de los modales en mi sitio parecen funcionar bien con esto, ¡pero uno en particular no lo hizo! Extraño. ¡Gracias de todos modos!
blueprintchris
15

Busqué por un momento 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 nada obvio! ( datatables.net)

Si aún tiene este problema, busque otras bibliotecas que podrían incluir bootstrap para usted. (le datatables.netpermite especificar una descarga con o sin bootstrap; otros hacen lo mismo).

Así que quité el bootstrap.min.jsde mi bundle.configy todo funcionó bien.

John Lucas
fuente
Impresionante, este resolvió mi problema con los modales. Estoy de acuerdo en que no era obvio en absoluto. Gracias
Haris
13

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

Mi application.jsarchivo 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. Culpa mía.

Giuseppe
fuente
9

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

Ricardo Pieper
fuente
En mi caso, agregué bootstrap.js y bootstrap.min.js ambos
ImranNaqvi, el
Esta respuesta me ayudó, alguien había incluido el bootstrap js de un cdn a pesar de que ya estaba instalado con npm
BritishSam
8

e.preventDefault(); con jquery ui

Para mí, este problema se produjo con la anulación del método de clic en un botón jquery ui, lo que provocó una recarga de la página al hacer clic de forma predeterminada.

LX-3
fuente
8

El problema también puede ocurrir si al usar jquery adjuntas un detector de eventos dos veces. Por ejemplo, establecería 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

gpasse
fuente
3
@karadayi no es un 'Arreglo', solo un caso en el que tal problema puede ocurrir.
gpasse
7

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ó a que el botón intentó enviar el formulario y volvió a cargar la página. Cambié el botón a un <a>enlace de la siguiente manera:

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

... y solucionó el problema.

NOTA: Todavía no tengo suficiente reputación para simplemente agregar un comentario o votar, y sentí que podría agregar una pequeña aclaración.

JDev
fuente
4

Yo también tuve 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.

Doug
fuente
3

En mi caso, solo tenía un solo archivo bootstrap.js, jquery.js incluido, pero aún obtenía 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>

Simplemente agregué e.preventDefault ();y funcionó a las mil maravillas.

Entonces, mi nuevo código era el siguiente:

<script type="text/javascript">
$(document).ready(function(){
  e.preventDefault();
  $("#bttn_<?php echo $rnt['id'];?>").click(function(){
     $("#myModal_<?php echo $rnt['id'];?>").modal('show');
  });
});
</script>
Mekey Salaria
fuente
1
Sí, eso me mordió. Gracias.
Jeremy Harris el
3

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

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

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>
akop
fuente
Esta es la mejor ruta si carga varias bibliotecas JS.
Daniel Vukasovich
2

En mi caso, he usado el actionlinkbotón en MVC y me he enfrentado a este problema, he intentado muchas soluciones anteriores y otras, pero todavía enfrento ese problema, luego me doy cuenta de mi error en el código.

He llamado modal en javascript usando

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

Antes del error utilizo 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 enfrento el problema.

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

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

entonces el problema se resuelve solo un error debido a que no hay # en el primero.

mira si esto te será útil.

Saurabh Solanki
fuente
2

¡Otra causa / solución más! Tenía en mi código JS:

$("#show_survey").click(function() {
  $("#survey_modal").modal("show")
})

Pero mi código HTML ya estaba escrito como:

<a class="small-text link" data-target="#survey_modal" data-toggle="modal" href="#" id="show_survey">Take a quick 7 question survey!</a>

Entonces, esta es otra permutación de cómo la duplicación ingresó el código y causó que el modal se abriera y luego se cerrara. En mi caso, data-targety data-toggleen html según Bootstrap, los documentos ya activan el modal para que funcione. Por lo tanto, el código JS es redundante y, cuando se elimina, funciona.

James
fuente
1

Tuve el mismo problema trabajando en un proyecto con asp.NET. Estaba usando bootstrap 3.1.0 lo resolvió degradar a Bootstrap 2.3.2.

Hace
fuente
1

Yo también tuve el problema, si el botón está dentro de un etiqueta entonces el modal aparece una vez y desaparece lo suficientemente pronto, sacando el botón de la forma fijada la isue. Gracias terminé en este hilo! +1 a todos.

Satheeshwaran
fuente
1

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 para anclar la etiqueta que debería funcionar, el problema se produce debido a su botón de tipo, ya que está tratando de enviarlo, por lo que el modal desaparece de inmediato <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> .

Bhargav
fuente
Según la sugerencia de @RoryHunter anterior, simplemente alterando los botones type="submit"para type="button"resolver este problema.
Richard Hauer
1

En mi caso, tenía el CDN incluido en el encabezado 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 (a continuación) del jefe de application.html.erb y el modal se mantiene abierto adecuadamente.

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

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

El siguiente código muestra el modal y que desapareció de inmediato:

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

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

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

¿Has intentado eliminar

data-dismiss="modal"
JeffNhan
fuente
0

Sé que esto es antiguo, pero aquí hay otra cosa para verificar: asegúrese de tener solo un atributo data-target =. Lo había duplicado y el resultado fue según este hilo.

Pete
fuente
0

Había agregado bootstrapa mi proyecto a través de bower, luego importé el bootstrap.min.jsarchivo y después del modal.jsarchivo. (El botón que abre el modal está dentro de un formulario). Solo elimino la importación modal.jsy funciona para mí.

pableiros
fuente
0

en caso de que alguien use codeigniter 3 bootstrap con datatable.

a continuación está mi solución en config / ci_boostrap.php

//'assets/dist/frontend/lib.min.js',
//lib.min.js has conflict with datatables.js and i removed it replace with jquery.js
'assets/dist/frontend/jquery-3.3.1.min.js',
'assets/dist/frontend/app.min.js',
'assets/dist/datatables.js'
bravo net
fuente
0

Tuve que enfrentar el mismo problema. La razón es la misma que la @merv. El problema fue con un componente de calendario agregado a la página. El componente en sí agrega la función modal que se utilizará en la ventana emergente del calendario.

Entonces, las razones para romper la ventana emergente del modelo serán una o más de las siguientes

  • Carga de más de un bootstrap js versiones / archivos (minified ...)
  • Agregar un calendario externo a la página donde se usa bootstrap
  • Agregar alerta personalizada o biblioteca emergente a la página
  • Cualquier otra biblioteca que agregue comportamiento emergente
Shantha Kumara
fuente
0

Mientras trabajo con Angular (5), enfrento el mismo problema, pero en mi caso resolví lo siguiente:

componente.html

<button type="button" class="btn btn-primary"  data-target="#myModal" 
(click)="showresult()">fff</button>

<div class="modal" id="myModal" role="dialog"  tabindex="-1" data-backdrop="false">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Modal body text goes here.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Save changes</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

componente.ts

NOTA: necesita importar jquery en el archivo ts como "declare var $: any;"

  showresult(){
    debugger
    $('#myModal').modal('show');
  }

Cambios que hice:

  • eliminé "data-toggle =" modal "de la etiqueta del botón (gracias a @miCRoSCoPiC_eaRthLinG esta respuesta me ayuda aquí) en mi caso muestra modal, así que creé (click) =" showresult () "

  • El componente inside.ts debe declarar Jquery ($) y el método de clic dentro del botón showresult () llama "$ ('# myModal'). modal ('show');"

Bhagvat Lande
fuente
0

Tuve el mismo problema porque estaba cambiando mi modal dos veces como se muestra a continuación:

statusCode: {
    410: function (request, status, error) { //custom error code

        document.getElementById('modalbody').innerHTML = error;
        $('#myErrorModal').modal('toggle')
    }
},
error: function (request, error) {

    document.getElementById('modalbody').innerHTML = error;
    $('#myErrorModal').modal('toggle')
}

Eliminé una aparición de:

$ ('# myErrorModal'). modal ('alternar')

y funcionó como magia!

Pholoso Mams
fuente