Bootstrap Modal desaparece inmediatamente

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.

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.

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.

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.

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.

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.

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

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.

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

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.

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.

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>

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);
}

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>

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.

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

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.

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.

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

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

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>

¿Has intentado eliminar

data-dismiss="modal"

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.

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

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'

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

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');"

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!