Показывать индикатор загрузки в диалоговом окне Bootstrap 4 (модальное) - PullRequest
Новая
       3

Показывать индикатор загрузки в диалоговом окне Bootstrap 4 (модальное)

0 голосов
/ 09 апреля 2020

У меня есть простой вопрос о Bootstrap 4 с простым приемом. Я хочу показать Индикатор загрузки , такой как Twitter в каждый раз, когда пользователь открывает модал. Я делаю несколько кодов, и это работает хорошо, но я потерял некоторые части ....

Кнопка HTML Коды: 

<a href="#example_Modal" role="button" data-toggle="modal" data-target="#example_Modal">Click here</a>

Модальные HTML Коды 

<div class="modal fade" id="example_Modal" tabindex="-1" role="dialog" aria-labelledby="example_ModalLabel" aria-hidden="true"data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">

<!-- Preloader -->
<div id="modal-preloader">
    <div class="modal-preloader_status">
        <div class="modal-preloader_spinner">
            <div class="d-flex justify-content-center">
                <div class="spinner-border" role="status"></div>
            </div>
        </div>
    </div>
</div>
<!-- End Preloader -->

<div class="modal-body"></div>
<div class="modal-footer"></div>

</div>
</div>
</div>

Jquery Коды 

$('#example_Modal').on('shown.bs.modal', function () {
    $("#modal-preloader").delay(5000).fadeOut(100);
});

, как вы можете видеть здесь, это работает хорошо, но я хочу, чтобы индикатор загрузки индикатора показывал eveytime когда пользователь закрывает модал и снова открывает его, я думаю, что я хорошо объясняю, что я хочу ... спасибо

1 Ответ

0 голосов
/ 09 апреля 2020

Этого можно добиться, определив обработчик, когда модальное закрытие. Пожалуйста, запустите приведенный ниже фрагмент рабочего кода. 

$('#example_Modal').on('shown.bs.modal', function () {
    $("#modal-preloader").delay(5000).fadeOut(100);
});

// reset loading display when modal is closed
$('#example_Modal').on('hidden.bs.modal', function (e) {
   $("#modal-preloader").show();
})
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </head>

  <body>
    <a href="#example_Modal" role="button" data-toggle="modal" data-target="#example_Modal">Click here</a>
    <div class="modal fade" id="example_Modal" tabindex="-1" role="dialog" aria-labelledby="example_ModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
      <div class="modal-dialog" role="document">
        <div class="modal-content">

          <!-- Preloader -->
          <div id="modal-preloader">
            <div class="modal-preloader_status">
              <div class="modal-preloader_spinner">
                <div class="d-flex justify-content-center">
                  <div class="spinner-border" role="status"></div>
                </div>
              </div>
            </div>
          </div>
          <!-- End Preloader -->

          <div class="modal-body"></div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </body>

</html>

Есть и другой способ добиться этого, просто изменив дескриптор shown.bs.modal следующим образом: 

$('#example_Modal').on('shown.bs.modal', function () {
  $("#modal-preloader").show().delay(5000).fadeOut(100);
});

, но выглядит странно когда вы снова откроете модальный. Поэтому я рекомендую использовать hidden.bs.modal для сброса отображения раздела загрузки внутри модального окна.

Надеюсь, это ответит на ваш вопрос.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...