¿Cómo ocultar Bootstrap modal con javascript?

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>

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.

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.

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

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

// SHOW
$('#ModalForm').modal('show');
// HIDE
$('#ModalForm').modal('hide');

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

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

$('#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

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

$('.close').click(); 

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.

(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

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 ().

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.

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

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é

$('.modal-backdrop').hide(); // for black background
$('body').removeClass('modal-open'); // For scroll run
$('#modal').modal('hide'); 

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

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

Usé este código simple:

$("#MyModal .close").click();

$('#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();

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

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.

Usé este código

Ocultar modal con efecto suave con Fade Out.

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

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

$('.modal-open').css({'overflow': 'visible'});

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

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

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>

Esto se puede hacer en HTML:

data-dismiss="modal"

<button type="button" class="btn btn-secondary" data-dismiss="modal">Save</button>