如何将Bootstrap 4模态框用作Block UI实现AJAX调用时的遮屏提示

嘿，这个需求其实完全不用找什么特殊API，Bootstrap 4的模态框本身就能搞定！我来一步步给你讲具体实现方式：

步骤1：创建加载遮罩的模态框HTML结构 #

首先我们需要一个无法手动关闭的模态框，里面放加载提示（图标+文字）。核心是通过属性锁定模态框，避免用户误操作关闭它：

<!-- 加载遮罩模态框 -->
<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" aria-labelledby="loadingModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-body text-center">
        <!-- 使用Bootstrap内置的加载 spinner 图标 -->
        <div class="spinner-border text-primary" role="status">
          <span class="sr-only">加载中...</span>
        </div>
        <p class="mt-2">稍候...</p>
      </div>
    </div>
  </div>
</div>

这里的关键属性说明：

• data-backdrop="static"：点击模态框背景不会关闭模态框
• data-keyboard="false"：按下ESC键不会关闭模态框
• modal-dialog-centered：让加载内容垂直居中，提升视觉体验

步骤2：编写控制模态框的JS逻辑 #

我们封装两个简单函数来显示/隐藏模态框，然后在AJAX请求的生命周期里调用它们：

// 显示加载遮罩
function showLoadingOverlay() {
  $('#loadingModal').modal('show');
}

// 隐藏加载遮罩
function hideLoadingOverlay() {
  $('#loadingModal').modal('hide');
}

// 示例AJAX调用（替换成你的实际接口）
$.ajax({
  url: '/your-api-endpoint',
  method: 'POST',
  data: { /* 你的请求数据 */ },
  beforeSend: function() {
    // AJAX请求发起前立即显示遮罩，阻止用户操作
    showLoadingOverlay();
  },
  success: function(response) {
    // 处理接口返回的成功数据
    console.log('请求成功:', response);
  },
  error: function(xhr, status, error) {
    // 处理请求失败的情况
    console.error('请求出错:', error);
  },
  complete: function() {
    // 无论请求成功/失败，都在完成后隐藏遮罩
    hideLoadingOverlay();
  }
});

步骤3：可选的样式优化（按需调整） #

如果默认样式不符合你的需求，可以自定义一些CSS来优化：

/* 调暗遮罩背景的透明度 */
#loadingModal .modal-backdrop {
  opacity: 0.7 !important;
}

/* 放大加载文字的字号 */
#loadingModal .modal-body p {
  font-size: 1.1rem;
  color: #6c757d;
}

/* 调整spinner图标的大小 */
#loadingModal .spinner-border {
  width: 2rem;
  height: 2rem;
}

关键注意事项 #

• 一定要用complete回调来隐藏遮罩，而不是只在success里处理——否则请求失败时遮罩会一直停留在页面上
• 模态框的aria-hidden="true"和aria-labelledby属性要保留，保证页面的可访问性
• 如果你的项目里没有用jQuery，也可以用原生JS控制模态框：document.getElementById('loadingModal').classList.add('show')（不过需要手动处理背景遮罩的显示）

内容的提问来源于stack exchange，提问作者Roman Pokrovskij