Я показываю модальное окно Bootstrap для загрузки при выполнении вызовов AJAX. Я транслировал событие "progress.init", когда мода загрузки должна отображаться, и "progress.finish", когда я хочу, чтобы модальная скрыть. Существуют определенные условия, при которых модальность скрывается очень быстро после показа, что приводит к тому, что модальный фон остается на экране. Последующие вызовы сокрытия элемента не удаляют фон. Я также не могу просто удалить все фоны, поскольку в окне загрузки могут отображаться другие модальные окна. Я собрал jsfiddle, демонстрируя проблему с просто вызовом модальной функции (вместо запуска событий).
var loadingModal = $("#loadingModal");
$("#btnShow").click(function () {
loadingModal.modal("show");
//hide after 3 seconds
setTimeout(function () {
loadingModal.modal("hide");
}, 3000);
});
$("#btnProblem").click(function () {
//simulate a loading screen finishing fast, followed by another loading screen
loadingModal.modal("show");
loadingModal.modal("hide");
loadingModal.modal("show");
//Again simulate 3 seconds
setTimeout(function () {
loadingModal.modal("hide");
}, 3000);
});
И HTML:
<div id="loadingModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<p>Loading...</p>
</div>
</div>
</div>
</div>
<button id="btnShow">Show Loading</button>
<button id="btnProblem">Cause show/hide problem</button>
В идеале я хотел бы разрешить это, не дожидаясь указанного времени до вызова модального ( "скрыть" ). Другими словами, я хочу попытаться избежать чего-то вроде:
elem.on("progress.finish", function () {
window.setTimeout(loadingModal.modal("hide");
}, 750);
Я также попытался подписаться на события hidden.bs.modal и показанные .bs.modal из бутстрапа, чтобы попытаться показать/скрыть элемент, если это необходимо, но может быть, это происходит неправильно... Любые идеи чтобы этот модал отображался/скрывался?
