V5 Modal & jQuery：加载内容时微调器中的问题

Question

我正在尝试在使用 bootstrap v5 modal 和 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

Answer 1

问题

1. $(this).remove() - 完全移除微调器。因此，微调器元素将不会在再次显示的模态中可用。
2. 删除了不必要的代码和条件

解决方案

不要删除微调器元素，只需使用 d-none 类将其隐藏

CodePen

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