如何为页面加载状态添加全局遮罩层（灰色背景+居中加载图标）

实际上，仅通过优化现有 #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 升级体验”。