El tutorial o código que encontrarás en este artículo es la solución más rápida y efectiva que encontramos a esta inquietud o dilema.
Solución:
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 cuando intente cerrarlo. En su controlador completo Ajax, elimine el modal y luego reemplace los datos.
Si eso no funciona, siempre puede forzarlo a que desaparezca haciendo lo siguiente:
Asegúrese de que su llamada inicial a $.modal() aplicar el comportamiento modal no es pasar más elementos de los que pretendías. Si esto sucede, terminará creando una instancia modal, completa con un elemento de fondo, para CADA elemento de la colección. En consecuencia, puede parecer que el telón de fondo se ha quedado atrás, cuando en realidad estás viendo uno de los duplicados.
En mi caso, estaba intentando crear el contenido modal sobre la marcha con un código como este:
myModal = $('
...lots of HTML content here...
');
$('body').append(myModal);
myModal.modal();
Aquí, el comentario HTML después del cierre.
La etiqueta significaba que myModal era en realidad una colección jQuery de dos elementos: el div y el comentario. Ambos fueron debidamente 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 se había quedado atrás.
Acabo de pasar demasiado tiempo en 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
Cuando reemplaza 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á acabadoy puedes engancharte así:
