¿Cómo ocultar el modal Bootstrap con javascript?
Leí 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 Bootstrap que abro desde un ayudante link_to 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 Contacty luego 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 tengo 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();lo que hace que el modal se descarte pero deja el fondo.
¿Alguna guía sobre cómo cerrar el modal y/o descartar el 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 intentar
$('#myModal').modal('hide');
Si funciona (y el modal se cierra), entonces sabrá que su Javascript cercano no se envía correctamente desde el servidor al navegador.
Si no funciona, entonces debe investigar más a fondo con 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.
para cerrar el modal de arranque , puede pasar 'ocultar' como opción al método modal de la siguiente manera
$('#modal').modal('hide');
Por favor, eche un vistazo al violín en funcionamiento aquí.
bootstrap también proporciona eventos que puede conectar a la funcionalidad modal , por ejemplo, si desea activar un evento cuando el modal haya terminado de ocultarse al usuario, puede usar el evento oculto.bs.modal . Puede leer más sobre métodos y eventos modales aquí en Documentación
Si ninguno de los métodos anteriores funciona, proporcione una identificación a su botón de cerrar y haga clic en el botón de cerrar.
La mejor forma de ocultar y mostrar un modal con bootstrap es
// SHOW
$('#ModalForm').modal('show');
// HIDE
$('#ModalForm').modal('hide');
Yo uso Bootstrap 3.4 A mi esto no me funciona
$('#myModal').modal('hide')
Desesperado, hice esto:
$('#myModal').hide();
$('.modal-backdrop').hide();
Quizás no sea elegante, pero funciona.
