如何添加Div避免Ajax请求时Overlay与Modal被点击穿透？

看起来你的加载遮罩已经有了基础结构，但核心问题是遮罩层没有真正拦截用户的点击事件，或者页面上有其他元素的层级比遮罩更高。下面给你几个可行的实现思路，结合你的现有代码来调整：

思路1：优化Overlay的CSS，确保完全拦截点击 #

你的.overlay已经设置了全屏覆盖，但可以通过几个CSS调整让它真正阻止点击穿透：

1. 替换旧的透明度写法，使用更现代的rgba，同时明确设置pointer-events: auto来拦截点击；
2. 用vh/vw代替100%，确保遮罩覆盖整个视口（包括滚动后的区域）；
3. 添加cursor: wait给用户视觉提示。

修改后的CSS：

.Progress { 
  height: 100%; 
  width: 100%; 
  position: fixed; 
  z-index: 1000; 
}
.overlay { 
  top: 0; 
  left: 0; 
  height: 100vh; /* 覆盖整个视口高度 */
  width: 100vw; /* 覆盖整个视口宽度 */
  background: rgba(255, 255, 255, 0.75); /* 现代透明度写法 */
  position: fixed; 
  z-index: 1001; 
  pointer-events: auto; /* 强制拦截点击事件 */
  cursor: wait; /* 提示用户当前不可操作 */
}
.modal { 
  width: 20rem; 
  padding: 16px; 
  top: 40%; 
  position: relative; 
  z-index: 1002; 
  overflow: auto; 
  text-align: center; 
  margin: auto; 
  float: none; 
}
.modal h3{ 
  font-family: helvetica; 
  font-size:1.5rem; 
  text-align: center; 
  margin:0; 
}
.modal p{ 
  font-family: helvetica; 
  font-size:1.5rem; 
  color: #000; 
  margin:0; 
}
#spinner { 
  height: 5rem; 
  width: 5rem; 
  margin:auto; 
  float:none; 
}

这个修改后，遮罩层会完全覆盖页面，并且所有点击都会被它拦截，不会穿透到下面的元素。

思路2：通过Body类禁用所有交互元素（更严谨） #

如果担心页面上有某些元素的z-index比遮罩层更高，可以在加载时给body添加一个类，统一禁用所有可点击元素：

1. 添加CSS规则：

/* 加载时禁止页面滚动 */
body.loading-active {
  overflow: hidden;
}
/* 禁用所有可交互元素 */
body.loading-active button,
body.loading-active a,
body.loading-active input,
body.loading-active select,
body.loading-active textarea {
  pointer-events: none;
  opacity: 0.6; /* 视觉上变灰，提示不可点击 */
}

2. 在Ajax请求的开始和结束时修改body类：

// 开始请求时显示加载框并添加禁用类
function showLoading() {
  const progressEl = document.querySelector('.Progress');
  progressEl.style.display = 'block';
  progressEl.setAttribute('aria-hidden', 'false'); // 优化无障碍属性
  document.body.classList.add('loading-active');
}

// 请求结束时隐藏加载框并移除禁用类
function hideLoading() {
  const progressEl = document.querySelector('.Progress');
  progressEl.style.display = 'none';
  progressEl.setAttribute('aria-hidden', 'true');
  document.body.classList.remove('loading-active');
}

// 你的Ajax调用示例
fetch('/your-api-endpoint')
  .then(() => {
    hideLoading();
    // 处理成功逻辑
  })
  .catch(() => {
    hideLoading();
    // 处理错误逻辑
  });

这种方式双重保障：既用遮罩层拦截点击，又直接禁用所有可交互元素，彻底避免用户误操作。

思路3：检查z-index冲突 #

如果上面两种方法都不生效，大概率是页面上有其他元素的z-index值大于1001（你的overlay的z-index）。可以通过浏览器开发者工具（F12）检查这些元素的层级，把.overlay的z-index调高到足够大的值，比如9999，确保它在所有元素之上。

内容的提问来源于stack exchange，提问作者user9727749