Bootstrap Modal desapareciendo inmediatamente

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 en él, parecía que no pasaría nada. Sin embargo, el botón estaba en un <form> que estaba buscando temporalmente la misma página.

Arreglé esto agregando type="button" al elemento button, para que no enviara el formulario cuando se hiciera clic.

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 obvio en absoluto! (datatables.net).

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

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

El mismo síntoma, en el contexto de una aplicación Rails con Bootstrap proporcionado 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 era eliminar una de las dos líneas. De hecho, el readme de la gema te advierte sobre este error. Culpa mía.

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.

e.preventDefault(); con jquery ui

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

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

El problema también puede ocurrir si se usa jquery para adjuntar un receptor de eventos dos veces. Por ejemplo, se establecería sin desvinculación :

            $("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 @Bhargav sugirió, mi problema se debió a que el botón intentó enviar el formulario y recargar la página. Cambié el botón a un enlace <a> 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 voto positivo, y sentí que podía agregar un poco de aclaración.

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

I simple agregué e.preventDefault(); a él y funcionó como charm.

Entonces, mi nuevo código era 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>

Me encontré con este tema a mí mismo hoy y pasó a 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 renderizado lo resolvió.

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

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

    <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, un clic en un botón causa 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 tengo el botón use actionlink en MVC y me he enfrentado a este problema, he intentado muchas soluciones anteriores y otras, pero aún me enfrento a ese problema, entonces me doy cuenta de mi error en el código.

He llamado modal en javascript usando

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

Antes del error uso 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.

Entonces edito este código de botón así

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

Entonces el problema se resuelve solo un error porque de no # en la primera.

Vea si esto le será útil.

Tuve el mismo problema trabajando en un proyecto con asp.NET. Estaba usando bootstrap 3.1.0 solucionado degradando a Bootstrap 2.3.2.

Me enfrentaba al 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 debe funcionar, el problema se produce debido a su tipo de botón ya que está tratando de enviar por lo que el modal desaparece inmediatamente.y también eliminar ocultar de ocultar modal se desvanecen dar <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> Espero que esto funcione para ti .

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

En mi caso, tenía el CDN incluido en el head of application.HTML.erb y también instaló la gema' jquery-rails', que supongo gracias a la documentación y publicaciones anteriores, es redundante.

Simplemente comenté el CDN (abajo) del jefe de aplicación.HTML.el erb y el modal permanecen abiertos adecuadamente.

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

Yo también tuve el mismo problema. 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ó inmediatamente:

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

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

Había agregado bootstrap a mi proyecto a través de bower, luego importé el archivo bootstrap.min.js y después el archivo modal.js. (El botón que abre el modal está dentro de un formulario). Acabo de quitar la importación para modal.js y funciona para mí.

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

A continuación se muestra mi correcció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'

Tuvo 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 propio componente agrega la característica modal que se utilizará en la ventana emergente del calendario.

Así que las razones para romper la ventana emergente del modelo serán una o más de las siguientes

• Cargando más de un bootstrap js versions/files (minified ...)
• Agregar un calendario externo a la página donde se usa bootstrap
• Agregar una alerta personalizada o una biblioteca emergente a la página
• Cualquier otra biblioteca que agregue comportamiento emergente

Mientras trabajaba con Angular(5), me enfrento al mismo problema, pero en mi caso resolví de la siguiente manera:

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: es necesario importar jquery en el archivo ts como " declare var var: any;"

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

Cambios que hice:

• Removed " data-toggle="modal" from Button tag (thanks to @ miCRoSCoPiC_eaRthLinG this answer helps me here) in my case its showing modal so i created (click)= " showresult()"

• Dentro componente.ts necesita declarar Jquery ($) y dentro del botón haga clic en el método showresult () llamar " my('#myModal').modal ('mostrar');"