如何为页面加载器添加全局遮罩灰屏效果-html教程-PHP中文网

如何为页面加载器添加全局遮罩灰屏效果

本文介绍如何在 jquery ajax 请求期间，通过纯 css 方式为整个页面添加半透明灰色遮罩层，突出显示居中旋转的加载图标，无需修改 html 结构或引入额外 dom 元素。

本文介绍如何在 jquery ajax 请求期间，通过纯 css 方式为整个页面添加半透明灰色遮罩层，突出显示居中旋转的加载图标，无需修改 html 结构或引入额外 dom 元素。

实现“全页灰屏 + 加载图标”的核心目标，是让用户视觉焦点自然聚焦于加载状态，同时禁用（或弱化）背景交互感。许多开发者会本能地新增一个

配合 #loader 使用，但其实——仅靠一个 #loader 元素，配合巧妙的 CSS box-shadow 技巧，即可零 HTML 变更达成等效效果。

✅ 推荐方案：利用超大 box-shadow 模拟全屏遮罩

关键思路是：将 #loader 的 box-shadow 扩展为覆盖整个视口的深色半透明层。由于 box-shadow 支持 inset 和 spread，我们使用 极大发散值（如 100vw）配合透明度控制，让阴影“撑满”屏幕，形成视觉上的灰屏。

以下是优化后的完整 CSS（已适配现代浏览器并增强可维护性）：

#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 9999; /* 确保高于所有内容 */
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px; /* 更精确的居中：-height/2, -width/2 */
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top-color: #3498db;
  animation: spin 2s linear infinite;
  /* ? 核心：全屏灰色遮罩（半透明白色底 + 深灰阴影）*/
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 
    inset 0 0 0 100vw rgba(0, 0, 0, 0.4), /* 内阴影全覆盖，模拟遮罩 */
    0 0 0 100vw rgba(0, 0, 0, 0.4);       /* 外阴影兜底（兼容性补充）*/
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

? 为什么用 inset？
inset 内阴影会从元素自身边界向内扩散，结合 100vw 的 spread 值，可稳定覆盖整个视口宽度（即使页面有横向滚动条也基本兼容）。相比外阴影，它更不易受父容器 overflow 影响，且渲染性能更优。

✅ jQuery 控制逻辑（保持简洁可靠）

你现有的 ajaxStart / ajaxStop 绑定完全可用，只需确保 #loader 初始为隐藏状态：

<!-- HTML 中仅需保留这一行 -->
<div id="loader" style="display: none;"></div>

$(document).ajaxStart(function() {
  $("#loader").show();
});

$(document).ajaxStop(function() {
  $("#loader").hide();
  $('#cancelBtn').removeAttr('hidden');
});

⚠️ 注意事项与最佳实践

层级安全：z-index: 9999 是保守设定，若项目中存在更高 z-index（如弹窗、导航栏），请统一检查并调整，推荐使用 CSS 自定义属性管理层级变量。
移动端适配：100vw 在 iOS Safari 中可能因地址栏缩放产生微小偏差，可追加媒体查询微调：
```
@media (max-width: 768px) {
  #loader {
    box-shadow: inset 0 0 0 101vw rgba(0,0,0,0.4);
  }
}
```
无障碍友好：灰屏期间建议临时禁用键盘 Tab 导航（document.body.setAttribute('aria-hidden', 'true')）并在加载结束时恢复，提升残障用户操作体验。
性能提示：避免在 box-shadow 中使用过大的模糊值（如 50px），本例中 0 模糊值保证了 GPU 加速渲染，无卡顿风险。