本文介绍如何在 jquery ajax 请求期间，通过纯 css 实现全屏灰色遮罩效果，并保持原有加载图标居中显示，无需修改 html 结构，兼容性强且性能轻量。
本文介绍如何在 jquery ajax 请求期间，通过纯 css 实现全屏灰色遮罩效果，并保持原有加载图标居中显示，无需修改 html 结构，兼容性强且性能轻量。
在 Web 开发中，当发起异步请求（如 AJAX）时，为提升用户体验，常需暂时“禁用”页面交互并突出显示加载状态。常见的做法是叠加一层半透明灰色背景（即遮罩层），再将加载图标置于其中心。但许多开发者倾向于新增 DOM 元素（如
）来实现遮罩，这会增加 HTML 复杂度和 JS 控制逻辑。
实际上，仅通过优化现有 #loader 元素的 CSS 即可达成等效效果——无需改动 HTML 或 JavaScript，也无需监听额外事件。
核心原理：利用 box-shadow 模拟全屏遮罩
关键技巧在于使用超大尺寸的内阴影（box-shadow）覆盖整个视口。由于 #loader 已设置 position: absolute 且 z-index: 1，我们可通过以下方式扩展其视觉影响范围：
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 120px;
height: 120px;
margin: -76px 0 0 -76px; /* 精确居中偏移 */
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
animation: spin 2s linear infinite;
/* ? 关键：用 box-shadow 创建全屏灰色遮罩 */
background: rgba(0, 0, 0, 0.4); /* 可选：增强图标自身对比度 */
box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.4); /* 水平/垂直偏移为 0，扩散半径 = 视口宽度 */
}✅ 为什么有效？
box-shadow: 0 0 0 100vw 表示：无偏移、无模糊、但扩展半径达 100vw（即整个视口宽度）。配合 rgba(0,0,0,0.4)，它会在 #loader 周围均匀渲染一层半透明黑色遮罩——由于扩散足够大，实际覆盖整个页面，形成视觉上的“灰屏”。
完整 CSS 示例（含动画兼容性）
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1050; /* 建议提高 z-index，避免被其他绝对定位元素遮挡 */
width: 120px;
height: 120px;
margin: -76px 0 0 -76px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
animation: spin 2s linear infinite;
background: rgba(255, 255, 255, 0.9); /* 白色底增强图标清晰度 */
box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.4);
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}JavaScript 保持简洁（无需任何变更）
你当前的 jQuery 事件绑定已完全适用：
$(document).ajaxStart(function() {
$("#loader").show();
});
$(document).ajaxStop(function() {
$("#loader").hide();
$('#cancelBtn').removeAttr('hidden');
});✅ 加载开始时 #loader.show() → 遮罩自动生效；
✅ 加载结束时 #loader.hide() → 遮罩同步消失。
注意事项与最佳实践
- z-index 值建议 ≥ 1050：确保遮罩层高于常见组件（如 Bootstrap Modal 默认为 1050），避免被意外遮挡。
- 慎用 100vh 替代 100vw：100vw 覆盖宽度足够，而 100vh 在移动端可能因地址栏缩放导致遮罩不完整；100vw 更鲁棒。
-
无障碍考虑：若页面需支持屏幕阅读器，建议在 ajaxStart 时添加 aria-busy="true" 到 ，并在 ajaxStop 时移除：
$(document).ajaxStart(() => { $('body').attr('aria-busy', 'true'); $('#loader').show(); }); $(document).ajaxStop(() => { $('body').removeAttr('aria-busy'); $('#loader').hide(); $('#cancelBtn').removeAttr('hidden'); }); - 性能提示：该方案纯 CSS 实现，无重排（reflow），比动态插入/删除 DOM 元素更高效。
通过这一轻量级优化，你既保留了原有代码结构的简洁性，又显著提升了加载态的视觉引导效果——真正做到了“零 HTML 修改，一行 CSS 升级体验”。
