example - ¿Cómo ocultar Bootstrap modal de javascript?
modal bootstrap ejemplos (19)
He leído las publicaciones aquí, el sitio de Bootstrap y busqué en Google como locas, pero no puedo encontrar lo que estoy seguro de que 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 acción ContactsController.create , tengo un código que crea Contact luego pasa a create.js.erb . En create.js.erb , tengo un código de manejo de errores (una mezcla 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.
He intentado $(''#myModal'').modal(''hide''); Y esto no tiene efecto. También he intentado $(''#myModal'').hide(); lo que hace que el modal se despida 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 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>
(Refiriéndose a Bootstrap 3), Para ocultar el uso modal: $(''#modal'').modal(''hide'') . Pero la razón por la que el telón de fondo se mantuvo (para mí) fue porque estaba destruyendo el DOM para el modal antes de que terminara ''hide''.
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
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 usted 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á un tipo de almacenamiento en caché.
Con el modal abierto en la ventana del navegador, use la consola del navegador para probar
$(''#myModal'').modal(''hide'');
Si funciona (y se cierra el modal), sabrá que su Javascript de cierre no se está enviando desde el servidor al navegador correctamente.
Si no funciona, necesita investigar más sobre el cliente lo que está sucediendo. Por ejemplo, asegúrese de que no haya dos elementos con la misma ID. Por ejemplo, ¿funciona la primera vez después de cargar la página pero no la segunda vez?
Consola del navegador: Firebug para Firefox, la consola de depuración para Chrome o Safari, etc.
Encontré la solución correcta puedes usar este código
//OPEND
$(''#ModalForm'').modal(''show'');
//HIDE
$(''#ModalForm'').modal(''hide'');
Esta es la mala práctica, pero puede usar esta técnica para cerrar el modo 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">×</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>
Estaba experimentando con ese mismo error y esta línea de código realmente me ayuda.
$("[data-dismiss=modal]").trigger({ type: "click" });
Estaba experimentando el mismo problema, y después de un poco de experimentación encontré una solución. En mi controlador de clics, necesitaba detener el evento para que no se hiciera más burbujas, así:
$("a.close").on("click", function(e){
$("#modal").modal("hide");
e.stopPropagation();
});
Incluso tengo el mismo tipo de problemas. Esto me ayudó mucho
$("[data-dismiss=modal]").trigger({ type: "click" });
La mejor forma de ocultar y mostrar un modal con bootstrap es
$(''.close'').click();
Lo que descubrimos fue que solo hubo una pequeña demora entre la llamada a nuestro código de servidor y el regreso a la llamada exitosa. Si envolvimos la llamada al servidor en $("#myModal").on(''hidden.bs.modal'', function (e) controlador de $("#myModal").on(''hidden.bs.modal'', function (e) y luego llamamos a $("#myModal").modal("hide"); método $("#myModal").modal("hide"); el navegador ocultaría el modal y luego invocaría el código del lado del servidor.
De nuevo, no es elegante sino funcional.
function myFunc(){
$("#myModal").on(''hidden.bs.modal'', function (e) {
// Invoke your server side code here.
});
$("#myModal").modal("hide");
};
Como puede ver, cuando se invoca myFunc , ocultará el modal y luego invocará el código del lado del servidor.
Me doy cuenta de que esta es una pregunta antigua, pero descubrí que ninguno de estos era realmente lo que estaba buscando exactamente. Parece que se debe al 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...
Luego esto: (Anote el nombre ''shown.bs.modal'' que indica que el modal se ha mostrado completamente en lugar de ''show'' que se dispara cuando se llama al evento show. (Originalmente probé solo ''mostrar'' pero no funcionó. )
$(''#myModal'').on(''shown.bs.modal'', function (event) {
if (closeEditModal) {
$(''#myModal'').modal(''hide'');
closeModal = false;
}
});
Espero que esto le salve a alguien la investigación extra algún día. Pasé un poco buscando una solución antes de que se me ocurriera esto.
Me encontré con lo que creo que era un problema similar. El $(''#myModal'').modal(''hide''); Es probable que esté ejecutando esa función y llegue a la línea
if (!this.isShown || e.isDefaultPrevented()) return
El problema es que el valor isShown puede no estar definido incluso si se muestra el modal y el valor debe ser verdadero. He modificado el código de arranque ligeramente a la siguiente
if (!(typeof this.isShown == ''undefined'') && (!this.isShown || e.isDefaultPrevented())) return
Esto pareció resolver el problema en su mayor parte. Si el telón de fondo aún permanece, siempre puede agregar una llamada para eliminarla manualmente después de la llamada oculta $(''.modal-backdrop'').remove(); . No es ideal en absoluto pero funciona.
Necesitamos cuidar el evento de burbujeo. Necesito agregar una línea de código
$("#savechanges").on("click", function (e) {
$("#userModal").modal("hide");
e.stopPropagation(); //This line would take care of it
});
Tuve más suerte al hacer la llamada después de que ocurrió la devolución de llamada "mostrada":
$(''#myModal'').on(''shown'', function () {
$(''#myModal'').modal(''hide'');
})
Esto aseguró que el modal se hiciera de carga antes de que se hiciera la llamada hide ().
Yo uso Bootstrap 3.4 Para mí esto no funciona
$(''#myModal'').modal(''hide'')
En la desesperación, hice esto:
$(''#myModal'').hide();
$(''.modal-backdrop'').hide();
Quizás no sea elegante, pero funciona.
para cerrar el modo de arranque, puede pasar ''ocultar'' como opción al método modal de la siguiente manera
$(''#modal'').modal(''hide'');
Por favor, eche un vistazo a violín de trabajo aquí
bootstrap también proporciona eventos que puede enganchar a modal funcionalidad modal , como si desea activar un evento cuando el modal haya terminado de ocultarse al usuario, puede usar el evento hidden.bs.modal , puede leer más sobre los métodos y eventos modales aquí en modal
Si ninguno de los métodos anteriores funciona, asigne una identificación a su botón de cierre y haga clic en el botón de cerrar.
$(''#modal'').modal(''hide''); y sus variantes no funcionaron para mí a menos que tuviera data-dismiss="modal" como atributo en el botón Cancelar. Al igual que usted, mis necesidades eran posiblemente cerrar / posiblemente no cerrar según alguna lógica adicional, por lo que hacer clic en un enlace con data-dismiss="modal" no sería suficiente. Terminé teniendo un botón oculto con data-dismiss="modal" que podría invocar el controlador de clic, por lo 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();
$(''#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
$(''.modal-backdrop'').hide(); // for black background
$(''body'').removeClass(''modal-open''); // For scroll run
$(''#modal'').modal(''hide'');