¿Cómo ocultar Bootstrap modal con javascript?

282

He leído las publicaciones aquí, el sitio Bootstrap, y busqué en Google como loco, pero no puedo encontrar lo que estoy seguro es una respuesta fácil ...

Tengo un modal de Bootstrap que abro desde un link_to helper como este:

<%= link_to "New Contact", new_contact_path, {remote: true, 'data-toggle' => 'modal', 'data-target' => "#myModal",  class: "btn btn-primary"} %>

En mi ContactsController.createacción, tengo un código que crea y Contactluego pasa a create.js.erb. En create.js.erb, tengo un código de manejo de errores (una combinación de ruby ​​y javascript). Si todo va bien, quiero cerrar el modal.

Aquí es donde estoy teniendo problemas. Parece que no puedo descartar el modal cuando todo va bien.

Lo he intentado $('#myModal').modal('hide');y esto no tiene ningún efecto. También probé $('#myModal').hide();qué hace que el modal se descarte pero deja el telón de fondo.

¿Alguna guía sobre cómo cerrar el modal y / o descartar el telón de fondo desde dentro create.js.erb?

Editar

Aquí está el marcado para myModal:

<div class="modal hide" id="myModal" >
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Add Contact</h3>
    <div id="errors_notification">
    </div>
  </div>
  <div class="modal-body">
    <%= form_for :contact, url: contacts_path, remote: true do |f| %>  
      <%= f.text_field :first_name, placeholder: "first name" %>
      <%= f.text_field :last_name, placeholder: "last name" %>
      <br>
      <%= f.submit "Save", name: 'save', class: "btn btn-primary" %>
      <a class="close btn" data-dismiss="modal">Cancel</a>
    <% end %>
  </div>
  <div class="modal-footer">
  </div>
</div>
jvillian
fuente
1
$('#myModal').modal('hide');es la sintaxis correcta para cerrar / ocultar el modal con id myModal(puede probar esto en la página de documentación de Bootstrap ). ¿Estás seguro de que tienes un elemento con esta identificación en tu página? Además, ¿qué estás tratando de lograr con esta llamada? Su implementación actual realiza una solicitud de Ajax new_contact_pathy al mismo tiempo abre el modal con el contenido de #myModal: ¿es esto lo que desea?
Julian D.
Hola julian Publiqué el marcado myModal arriba y, de hecho, hay un div con id myModal. Lo volví a intentar $('myModal').modal('hide')y aún no sirve. HM En términos de lo que estoy tratando de lograr, creo que puede haber sido incorrecto usar el link_to ayudante. He reemplazado esto con: <a data-toggle="modal" href="#myModal" class="btn btn-primary">Add Contact</a>ya que realmente no necesito una llamada new_contact_path. Solo quiero que el modal se abra y luego trate con la entrada del usuario. Gracias por tomarse el tiempo de responder. Veré si no puedo resolver esto.
jvillian
Supongo que es solo un error tipográfico, pero la llamada debería ser $('#myModal').modal('hide');( #falta un comentario).
Julian D.
1
Lo malo es escribir en lugar de copiar del código real. El código real se lee: $('#myModal').modal('hide'). J
jvillian
Puede intentar usar bootboxjs
md. ahsan ariful

Respuestas:

494

Con el modal abierto en la ventana del navegador, use la consola del navegador para probar

$('#myModal').modal('hide');

Si funciona (y el modal se cierra), entonces sabrá que su Javascript cerrado no se envía correctamente desde el servidor al navegador.

Si no funciona, debe investigar más sobre el cliente lo que está sucediendo. Por ejemplo, asegúrese de que no haya dos elementos con la misma identificación. Por ejemplo, ¿funciona la primera vez después de cargar la página pero no la segunda?

Consola del navegador: firebug para firefox, la consola de depuración para Chrome o Safari, etc.

Larry K
fuente
El segundo párrafo era lo que estaba buscando. Las identificaciones duplicadas estaban haciendo que mis modales no se mostraran correctamente la segunda vez.
Matias
Esto solucionó el problema para mí. Gracias.
Finchy70
77

a cerca de arranque modal puede pasar 'ocultar' como opción de método modal de la siguiente

$('#modal').modal('hide');

Por favor, eche un vistazo al violín de trabajo aquí

bootstrap también proporciona eventos que puede conectar a la funcionalidad modal , como si desea activar un evento cuando el modal ha terminado de ocultarse para el usuario, puede usar el evento hidden.bs.modal . Puede leer más sobre métodos modales y eventos aquí en Documentación

Si no funciona ninguno de los métodos anteriores, asigne una identificación a su botón de cerrar y haga clic en el botón de cerrar.

Subodh Ghulaxe
fuente
1
Esto es especialmente útil cuando sabe exactamente en qué punto se supone que se cierra el diálogo modal. Por ejemplo al final de una función de éxito. De esa manera, si hay un error, el cuadro de diálogo puede mostrarlo.
Se
47

Yo uso Bootstrap 3.4 Para mí esto no funciona

$('#myModal').modal('hide')

Desesperado, hice esto:

$('#myModal').hide();
$('.modal-backdrop').hide();

Tal vez no sea elegante, pero funciona

gaza
fuente
2
Sería mejor si usa $ (". Modal-backdrop"). Remove ();
Bloodhound
1
Esto introducirá nuevos errores. utilice métodos recomendados,
Benjamin Eckstein
jQuery ('. modal-backdrop'). click ();
pequeño buggy pero seguramente funciona. La solución de Manuel Fernando a continuación funcionó perfectamente para mí.
Munam Yousuf
@Umingo, por favor recomiende un método si los mencionados aquí no son buenos y conoce uno.
abarca el
47

La mejor forma de ocultar y mostrar un modal con bootstrap es

// SHOW
$('#ModalForm').modal('show');
// HIDE
$('#ModalForm').modal('hide');
Royer Vazquez
fuente
La mejor respuesta con diferencia. Simular el comportamiento con clics, jQuery fadeOut o css puede crear desalineaciones a largo plazo.
Giorgio Tempesta
43

Estaba experimentando el mismo error y esta línea de código realmente me ayuda.

$("[data-dismiss=modal]").trigger({ type: "click" });
Manuel Fernando
fuente
1
Leí otro problema que sugería que el problema podría ser tener el atributo de descarte de datos en el elemento, y además intentar dispararlo desde JavaScript
Femtosegundo
Muchas Muchas Muchas gracias Manuel, esto después de muchas búsquedas resolvió mi problema, $ ('# MyModelId'). Modal ('hide'); $ ("[descarte de datos = modal]"). trigger ({type: "click"}); que quería cerrar el modal en el éxito de ajax ... muchas gracias mi querido
abdelrhman raafat
22
$('#modal').modal('hide'); 
//hide the modal

$('body').removeClass('modal-open'); 
//modal-open class is added on body so it has to be removed

$('.modal-backdrop').remove();
//need to remove div with modal-backdrop class
Shivam
fuente
funcionó, pero se rompió modal si lo abro nuevamente modal ya no se desplaza
kosas
21

Encontré la solución correcta, puedes usar este código

$('.close').click(); 
Osama Khodrog
fuente
mejor solución hasta ahora
kosas
excelente simplemente es el mejor +1
MooMoo
11

Me encontré con lo que creo que era un problema similar. El $('#myModal').modal('hide');es probable que correr a través de esa función y golpea la línea

if (!this.isShown || e.isDefaultPrevented()) return

El problema es que el valor isShown puede estar indefinido incluso si se muestra el modal y el valor debe ser verdadero. He modificado el código de arranque ligeramente a lo siguiente

if (!(typeof this.isShown == 'undefined') && (!this.isShown || e.isDefaultPrevented())) return

Esto pareció resolver el problema en su mayor parte. Si el telón aún permanece, siempre puede agregar una llamada para eliminarlo manualmente después de la llamada oculta $('.modal-backdrop').remove();. No es ideal en absoluto, pero funciona.

Richard Handley
fuente
11

(Refiriéndose a Bootstrap 3), para ocultar el uso modal: $('#modal').modal('hide') . Pero la razón por la que el telón colgaba (para mí) era porque estaba destruyendo el DOM para el modal antes de que terminara 'ocultar'.

Para resolver esto, encadené el evento oculto con la eliminación de DOM. En mi caso:this.render()

var $modal = $('#modal');

//when hidden
$modal.on('hidden.bs.modal', function(e) { 
  return this.render(); //DOM destroyer
});

$modal.modal('hide'); //start hiding
Nathan
fuente
1
pero, ¿podría decirme cómo se this.render()muestra undefined is not a functionen mi consola Chrome?
Anil Kumar Pandey
9

Tuve más suerte haciendo la llamada después de que ocurriera la devolución de llamada "mostrada":

$('#myModal').on('shown', function () {
      $('#myModal').modal('hide');
})

Esto aseguró que el modal se cargara antes de que se hiciera la llamada hide ().

schoonie23
fuente
8

Lo que encontramos fue que solo hubo un ligero retraso entre la llamada a nuestro código de servidor y el regreso a la llamada exitosa. Si envolvimos la llamada al servidor en el $("#myModal").on('hidden.bs.modal', function (e)controlador y luego llamamos al$("#myModal").modal("hide"); método, el navegador ocultaría el modal y luego invocaría el código del lado del servidor.

De nuevo, no elegante pero funcional.

 function myFunc(){
        $("#myModal").on('hidden.bs.modal', function (e) {
            // Invoke your server side code here.
        });
        $("#myModal").modal("hide");
 };

Como puede ver, cuando myFuncse invoca, ocultará el modal y luego invocará el código del lado del servidor.

markdotnet
fuente
6

Estaba experimentando el mismo problema, y ​​después de un poco de experimentación encontré una solución. En mi controlador de clics, necesitaba evitar que el evento apareciera, así:

$("a.close").on("click", function(e){
  $("#modal").modal("hide");
  e.stopPropagation();
});
brentmc79
fuente
6

Aquí está el documento: http://getbootstrap.com/javascript/#modals-methods

Aquí está el método: $ ('# myModal'). Modal ('hide')

Si necesita abrir varias veces el modal con contenido diferente, sugiero agregar (en su js principal):

$('body').on('hidden.bs.modal', '.modal', function () {
      $(this).removeData('bs.modal');
    });

Así que limpiará el contenido para la próxima apertura y evitará una especie de almacenamiento en caché

Christophe Meheut Forik 21
fuente
6
$('.modal-backdrop').hide(); // for black background
$('body').removeClass('modal-open'); // For scroll run
$('#modal').modal('hide'); 
Isa ilimitado
fuente
5

Incluso yo tengo el mismo tipo de problemas. Esto me ayudó mucho

$("[data-dismiss=modal]").trigger({ type: "click" });
Jaggi
fuente
5

Usé este código simple:

$("#MyModal .close").click();
Viktor Kisil'ov
fuente
4

$('#modal').modal('hide');y sus variantes no funcionaron para mí a menos que tuviera data-dismiss="modal"como atributo el botón Cancelar. Al igual que usted, mis necesidades eran posiblemente cerrar / posiblemente no cerrar en función de alguna lógica adicional, por lo que hacer clic en un enlace data-dismiss="modal"directamente no funcionaría. Terminé teniendo un botón oculto con el data-dismiss="modal"que podía invocar mediante programación el controlador de clics, así que

<a id="hidden-cancel" class="hide" data-dismiss="modal"></a>
<a class="close btn">Cancel</a>

y luego dentro de los controladores de clic para cancelar cuando necesite cerrar el modal que puede tener

$('#hidden-cancel').click();
Tyler
fuente
En mi caso (página asp net razor), lo tenía similar al OP: tenía un div algo vacío con la clase "modal" y agregué dinámicamente un archivo cshtml, por ejemplo, el cuerpo modal y agregué un clic a un botón de este cuerpo tan pronto como se muestre el modal. Llamar a ".modal ('hide)" solo no fue suficiente, como usted señaló: "el desestimamiento de datos =" modal "" en el botón de invocación fue el trato !!! ty
Csharpest
3

Tenemos que ocuparnos del evento burbujeante. Necesita agregar una línea de código

$("#savechanges").on("click", function (e) {
        $("#userModal").modal("hide");
        e.stopPropagation(); //This line would take care of it
    });
Prathap Kudupu
fuente
3

Me doy cuenta de que esta es una vieja pregunta, pero descubrí que ninguno de ellos era realmente lo que estaba buscando exactamente. Parece ser causado por intentar cerrar el modal antes de que termine de mostrarse.

Mi solución se basó en la respuesta de @ schoonie23 pero tuve que cambiar algunas cosas.

Primero, declaró una variable global en la parte superior de mi script:

<script>
    var closeModal = false;
    ...Other Code...

Luego en mi código modal:

$('#myModal').on('show.bs.modal', function (event) {
    ...Some Code...
    if (someReasonToHideModal) {
        closeModal = true;
        return;
    }
    ...Other Code...

Entonces esto: (Tenga en cuenta el nombre 'shown.bs.modal' que indica que el modal se ha mostrado completamente en lugar de 'show' que se activa cuando se llama al evento show. (Originalmente intenté solo 'mostrado' pero no funcionó. )

$('#myModal').on('shown.bs.modal', function (event) {
    if (closeEditModal) {
        $('#myModal').modal('hide');
        closeModal = false;
    }
});

Espero que esto le ahorre a alguien la investigación extra algún día. Pasé un poco buscando una solución antes de llegar a esto.

Jason Godson
fuente
2

Usé este código

Ocultar modal con efecto suave con Fade Out.

$('#myModal').fadeOut();

$('.modal-backdrop').fadeOut();

$('.modal-open').css({'overflow': 'visible'});
Sanjay Singhal
fuente
1

Si está utilizando la clase cerrada en sus modales, lo siguiente funcionará. Dependiendo de su caso de uso, generalmente recomiendo filtrar solo al modal visible si hay más de un modales con la clase cerrada.

$('.close:visible').click();
Dave
fuente
0

document.getElementById ('closeButton'). click (); // agregue un atributo data-dispats = "modal" a un elemento en el modal y dele esta identificación

Dr. XD
fuente
-1

Esta es una mala práctica, pero puede usar esta técnica para cerrar modal llamando al botón de cerrar en javascript. Esto cerrará modal después de 3 segundos.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
window.onload=function()
{
setInterval(function(){ 

$("#closemodal").click();
}, 3000);

}
</script> 
</head>
<body>

   <div class="container">
 <h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal"   data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

    <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
      <p>Some text in the modal.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal" id="closemodal">Close</button>
    </div>
  </div>

</div>
</div>

 </div>

</body>
</html>

fuente
-2

Esto se puede hacer en HTML:

data-dismiss="modal"

<button type="button" class="btn btn-secondary" data-dismiss="modal">Save</button>
jarosik
fuente
@KevinFrancis Debido a que la pregunta busca una forma programática para hacer esto desde el controlador, no cómo hacer un botón que lo haga.
GreenAsJade