Estoy usando bootstrap4 alpha 6 Modal, obtengo:
Error: Modal is transitioningEso sucede cuando intento volver a activar el mismo modal nuevamente con datos dinámicos a través de la función JavaScript de la siguiente manera:
function openModal(title, text) { $('.modal-title').text(title); $('.modal-body p').text(text); $('#modalAlert').modal('show'); }Traté de usar la función setTimeout, pero no funcionó como en este artículo: https://github.com/twbs/bootstrap/issues/21687
¿Alguna sugerencia?
Trabajó con la eliminación de fade de la clase div principal.
Código modal final ( agregado aquí para la posteridad ):
HTML
<div class="modal loadingModal" id="applemodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-body"> <div class="row"> <div class="col-md-6"> </div> <div class="col-md-6"> <img src="ico/4.svg"> </div> </div> </div> </div> </div>JS
$.ajax({ type: "GET", url: "/getTimeline", data: { 'dateTime': selected }, async: true, beforeSend: function () { $('#applemodal').modal({ backdrop: 'static', keyboard: false }); }, success: function(data) { $('#applemodal').modal('toggle'); } });Primero abra el modal y luego intente encontrar los elementos DOM que están dentro del modal (por ejemplo, $('.modal-title') y $('.modal-body p') )
Cambiar el orden de ejecución de su función podría funcionar:
function openModal(title, text) { $('#modalAlert').modal('show'); $('.modal-title').text(title); $('.modal-body p').text(text); }Finalmente, asegúrese de que el modal esté abierto/visible en la pantalla cuando acceda al HTML que está dentro del modal.