页面加载遮罩层设opacity为0后仍阻断元素交互，求解决方案

你忽略的核心点是：opacity: 0只是让元素视觉透明，但元素本身依然存在于页面中，会继续拦截所有鼠标/键盘交互。你的遮罩层是position: fixed且z-index: 100，哪怕透明了，它还是覆盖在整个页面最上层，下面的元素根本接收不到点击事件。

两种解决办法 #

方法1：禁用遮罩层的事件拦截 #

在设置opacity: 0的同时，添加pointer-events: none属性，让遮罩层不再响应任何交互，下方元素就能正常被点击：

$(document).ready(function() {
  // 等待3秒（必须写3000，不然会立即执行）
  setTimeout(function() {
    document.body.style.overflow = "visible";
    const loader = document.getElementById("modalLoader");
    loader.style.opacity = "0";
    loader.style.pointerEvents = "none";
  }, 3000);
});

更优雅的方式是用CSS类控制，避免内联样式：

.loaderScreen {
  /* 原有样式不变 */
  transition: opacity 2s;
}
.loaderScreen.hidden {
  opacity: 0;
  pointer-events: none;
}

$(document).ready(function() {
  setTimeout(function() {
    document.body.style.overflow = "visible";
    document.getElementById("modalLoader").classList.add("hidden");
  }, 3000);
});

方法2：过渡完成后隐藏元素 #

如果想彻底移除遮罩层的占位，可以在opacity过渡动画结束后（也就是2秒后），设置display: none：

$(document).ready(function() {
  setTimeout(function() {
    document.body.style.overflow = "visible";
    const loader = document.getElementById("modalLoader");
    loader.style.opacity = "0";
    // 等2秒过渡结束后再隐藏
    setTimeout(() => {
      loader.style.display = "none";
    }, 2000);
  }, 3000);
});

另外注意：你原来的setTimeout没有写延迟时间（第二个参数），默认会立即执行，根本达不到“等待3秒”的效果，一定要加上3000。

内容的提问来源于stack exchange，提问作者Old-fashioned-dev