El fondo modal de arranque de Twitter no desaparece
Estoy usando el cuadro de diálogo modal de arranque de Twitter. Cuando hago clic en el botón enviar del cuadro de diálogo modal de arranque, envía una solicitud AJAX. Mi problema es que el fondo modal no desaparece. El cuadro de diálogo modal desaparece correctamente, pero en su lugar permanece el "fondo modal" que crea la opacidad en la pantalla.
¿Qué puedo hacer?
Asegúrese de no reemplazar el contenedor que contiene la ventana modal real cuando realiza la solicitud AJAX, porque Bootstrap no podrá encontrar una referencia a él cuando intente cerrarlo. En su controlador completo de Ajax, elimine el modal y luego reemplace los datos.
Si eso no funciona, siempre puedes forzar su desaparición haciendo lo siguiente:
$('#your-modal-id').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
Asegúrese de que su llamada inicial para $.modal()aplicar el comportamiento modal no pase más elementos de los previstos. Si esto sucede, terminará creando una instancia modal, completa con un elemento de fondo, para CADA elemento de la colección. En consecuencia, podría parecer que el fondo se ha dejado atrás, cuando en realidad estás mirando uno de los duplicados.
En mi caso, estaba intentando crear el contenido modal sobre la marcha con un código como este:
myModal = $('<div class="modal">...lots of HTML content here...</div><!-- end modal -->');
$('body').append(myModal);
myModal.modal();
Aquí, el comentario HTML después de la </div>etiqueta de cierre significaba que myModal era en realidad una colección jQuery de dos elementos: el div y el comentario. Ambos fueron obedientemente convertidos en modales, cada uno con su propio elemento de fondo. Por supuesto, el modal creado a partir del comentario era invisible aparte del fondo, por lo que cuando cerré el modal real (el div) parecía que el fondo había quedado atrás.
Pasé demasiado tiempo con este problema :)
Si bien las otras respuestas proporcionadas son útiles y válidas, me pareció un poco complicado recrear de manera efectiva la funcionalidad de ocultación modal de Bootstrap, así que encontré una solución más limpia.
El problema es que hay una cadena de eventos que suceden cuando llamas
$("#myModal").modal('hide');
functionThatEndsUpDestroyingTheDOM()
Cuando luego reemplazas un montón de HTML como resultado de la solicitud AJAX, los eventos de ocultación modal no finalizan. Sin embargo, Bootstrap desencadena un evento cuando todo está terminado , y puedes conectarlo de esta manera:
$("#myModal").modal('hide').on('hidden.bs.modal', functionThatEndsUpDestroyingTheDOM);
¡Espero que esto sea útil!