本文介绍如何在 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 加速渲染，无卡顿风险。
✅ 总结
无需新增 DOM、不依赖 JavaScript 动态插入 overlay、不修改现有 HTML 结构——仅通过一行 box-shadow: inset 0 0 0 100vw ...，即可优雅实现专业级全屏加载遮罩。该方案轻量、高效、兼容性强，是现代前端加载态 UI 的推荐实践之一。
