本文介绍如何在 ajax 请求期间，通过纯 css 技术为整个页面添加半透明灰色遮罩层，并居中显示自定义加载动画，无需修改 html 结构，兼容性强、实现简洁高效。
本文介绍如何在 ajax 请求期间，通过纯 css 技术为整个页面添加半透明灰色遮罩层，并居中显示自定义加载动画，无需修改 html 结构，兼容性强、实现简洁高效。
在 Web 开发中，当执行异步请求（如 jQuery 的 $.ajax）时，为提升用户体验，常需临时禁用页面交互并突出显示加载状态。仅靠一个悬浮的旋转图标（如 W3Schools 提供的 CSS loader）往往不够醒目——用户可能仍会误操作背景内容。理想方案是叠加一层全局灰色遮罩（overlay），使页面内容“变灰失焦”，同时确保加载图标清晰可见。
最优雅的实现方式，是不新增 DOM 元素、不依赖 JavaScript 控制遮罩显隐，而是利用 CSS 的 box-shadow 特性，在原有 #loader 元素上扩展出覆盖全屏的灰色背景：
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1001; /* 确保高于遮罩层（见下文说明） */
width: 120px;
height: 120px;
margin: -60px 0 0 -60px; /* 修正：原代码中 -76px 计算有误，应为 -height/2 = -60px */
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
animation: spin 2s linear infinite;
/* 关键：使用超大 box-shadow 模拟全屏遮罩 */
box-shadow: 0 0 0 200vw rgba(0, 0, 0, 0.5); /* 200vw 确保覆盖任意宽度视口 */
background: transparent; /* 避免遮罩层颜色干扰 */
}✅ 原理说明：box-shadow: 0 0 0 200vw rgba(0,0,0,0.5) 创建了一个无模糊、无偏移、半径达 200vw 的阴影。由于 vw 是视口宽度单位，200vw 可完全覆盖当前屏幕及左右两侧等宽区域，实现“视觉上全屏填充”。配合 rgba(0,0,0,0.5) 实现柔和灰色半透明效果。
同时，保持原有的 jQuery 控制逻辑不变：
$(document).ajaxStart(function() {
$("#loader").show();
});
$(document).ajaxStop(function() {
$("#loader").hide();
$('#cancelBtn').removeAttr('hidden');
});⚠️ 重要注意事项：
- z-index 必须设为足够高（如 1001），确保加载图标始终位于遮罩层之上；
- 原 CSS 中 margin: -76px 0 0 -76px 存在计算错误（120px / 2 = 60px），已修正为 -60px，否则图标无法精准居中；
- 若页面存在滚动或固定定位元素，建议为遮罩层补充 position: fixed; top: 0; left: 0; 更稳妥——但本方案通过 box-shadow 已天然适配滚动，无需额外设置；
- 如需支持 IE11，请将 rgba() 替换为 #808080（十六进制灰度色），但会失去透明度控制。
? 进阶建议：若未来需增强交互控制（如点击遮罩关闭、支持键盘焦点锁定），可改用独立
+ JavaScript 显隐管理。但对轻量场景，本 CSS-only 方案以零侵入、高性能、易维护著称，是推荐首选。
