Bootstrap 4模态框加载指示器每次打开均显示的实现求助

我明白你的困扰——首次打开模态框时加载指示器正常工作，但关闭后再次打开就没反应了。这是因为第一次执行fadeOut()后，#modal-preloader元素被设置为display: none，而你没有在模态框再次打开时重新让它显示出来。

问题根源 #

当你调用fadeOut(100)，jQuery会把元素的CSSdisplay属性设为none。关闭模态框后，这个状态会被保留，下次打开模态框时，元素还是隐藏的，自然看不到加载效果。

修复方案 #

我们需要在模态框开始打开的瞬间（也就是show.bs.modal事件触发时），先把加载指示器重新显示出来，然后再在shown.bs.modal事件里执行延迟隐藏的逻辑。

修改后的jQuery代码如下：

// 当模态框开始显示时，先显示加载指示器
$('#example_Modal').on('show.bs.modal', function () {
  $("#modal-preloader").show(); // 强制显示加载元素
});

// 模态框完全显示后，延迟隐藏加载指示器
$('#example_Modal').on('shown.bs.modal', function () {
  $("#modal-preloader").delay(5000).fadeOut(100);
});

代码解释 #

• show.bs.modal：这个事件在模态框开始被显示（还没完全展示）时触发，此时我们立即把加载指示器恢复为可见状态，确保每次打开模态框都能看到它。
• shown.bs.modal：这个事件在模态框完全显示后触发，这里保留你原来的延迟隐藏逻辑，让加载指示器停留5秒后淡出。

完整示例代码 #

<!-- 触发按钮 -->
<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"></div>
    </div>
  </div>
</div>

<!-- jQuery代码 -->
<script>
$(document).ready(function() {
  $('#example_Modal').on('show.bs.modal', function () {
    $("#modal-preloader").show();
  });

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

这样修改后，每次打开模态框时，加载指示器都会重新显示，然后按设定的时间淡出，完美解决你的问题！

内容的提问来源于stack exchange，提问作者Houssam Hammouda