bootstrap 4 modal не закрывается после вызова hide

обзор

во время вызова ajax отображается модальный прогресс, затем по завершении или сбою он должен быть скрыт вызовом $("#progessDialog").modal("hide");. Похоже, что hide событие не стреляют. У меня есть крюк события в обработчике сбоя ajax, определенном для регистрации при запуске события hide, и он никогда не регистрирует, но другой журнал печатает, как ожидалось для этого условия:

   $('#progessDialog').on('hidden.bs.modal', function (e) {
       console.log('calling modal hide');
   });

воспроизведение:

  • нажмите на одно из значений (555 или 222), чтобы запуск встроенного редактирования
  • изменить значение
  • tab out

забавно

после того, как модальный отказывается скрываться и вызов js завершен, когда я ввожу $("#progessDialog").modal("hide") в консоли разработчика модальный скрывается, как ожидалось.

Примечание: не закончено, поэтому пока не тряпка на пользовательском интерфейсе, однако, я открыт для конструктивной критики, чтобы улучшить UX / JS. Существует нулевая проверка, которая приходит следующий.

Я видел несколько других вопросов SO, которые похожи по своей природе, но не совсем одинаковы (эти вопросы, похоже, имеют некоторые из модальных скрытых, но не фон - мой случай-полный модальный).

вот скрипка js, воспроизводящая проблему:https://jsfiddle.net/willtx/8dpL5rLd/29/

модальные

  <div class="modal fade" id="progessDialog" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="progessDialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <h5 class="modal-title" id="progessDialoglLabel">Processing...</h5>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div>
6
ajax bootstrap-4 bootstrap-modal jquery twitter-bootstrap

1 ответов

в конце концов, решение для этого довольно простое.
Как указано в документах Bootstrap о .modal('show'), вызов возвращается вызывающему до того, как модальный фактически был показан (т. е. до shown.bs.modal событие происходит).

в вашем случае это означает, что когда вы отдаете приказ на режимное открыться, это начинается открыть, но сразу после этого выполнение продолжается с другим кодом. Так в конце операции, когда вы вызываете .modal('hide') метод, модальный фактически не закончил загружаться полностью. Чтобы обойти это, вы можете посмотреть на shown.bs.modal событие, когда модальный закончил загрузку, а затем просто вызовите .modal('hide').

кроме того, поскольку вы хотите закрыть модальный в разных местах, может быть удобно написать функцию, которая обрабатывает закрытие модального. Что-то вроде ниже.

function closeModal() {
    $('#progessDialog').on('shown.bs.modal', function(e) {
        $("#progessDialog").modal("hide");
    });
}

вот ваша скрипка с предложенным модификация:https://jsfiddle.net/dferenc/5wehfss9/

5