Блог

Я пытаюсь отобразить подстрекателя spinner во время загрузки модального контента с помощью модального загрузчика v5 и jQuery.Я создаю пример, но у него есть некоторые проблемы.

Подстрекатель прядильщика больше не отображается, пока я закрыл модальный режим, который он отображает только в первый раз.

 $(window).on("load", function() {
  if ($(".modal").length) {
    $(".modal").modal("show");
    
    $(".modal").on("shown.bs.modal", function(e) {
      e.preventDefault();
      if ($(".spinner").length) {
        $(".spinner").delay(3000).fadeOut(500, function() {
          $(this).remove();
        });
      }
    });
    
    $(document).on("click", ".btn", function(e) {
      $(".modal").on("shown.bs.modal", function(e) {
        e.preventDefault();
        if ($(".spinner").length) {
          $(".spinner").delay(3000).fadeOut(500);
        }
      });
      
      $(".modal").on("hidden.bs.modal", function(e) {
        e.preventDefault();
        if ($(".spinner").length) {
          $(".spinner").delay(3000).fadeOut(500);
        }
      });
    });
  }
});
 

Живой пример: https://codepen.io/themes4all/pen/oNWeYzp

Проблемы

1. $(this).remove() — полностью удаляет спиннер. Таким образом, элемент spinner больше не будет доступен в показанном модальном режиме.
2. Ненужный код и условия удалены

Решение

Вместо удаления элемента spinner просто скройте его с помощью d-none класса

Кодовый набор

 $(function () {
  $(".modal").on("show.bs.modal", function (e) {
    $(".spinner")
      .removeClass("d-none")
      .delay(3000)
      .fadeOut(500, function () {
        $(this).addClass("d-none");
      });
  }).modal("show");
});