点击按钮后显示全屏加载Div5秒再跳转页面的实现求助

全屏加载层CSS样式 #

先添加全屏覆盖的CSS，让加载层铺满整个屏幕，遮挡页面内容并居中显示加载图标：

#spinner {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* 半透明黑色背景，增强遮挡效果 */
    z-index: 9999; /* 确保加载层在页面最上层 */
    justify-content: center;
    align-items: center;
}

#spinner img {
    width: 80px;
    height: 80px;
}

修复后的HTML与JS代码 #

原代码的核心问题是setTimeout内没有执行有效操作，也缺少页面跳转逻辑。以下是修复后的完整代码：

<div id="spinner">
  <img src="/sites/all/modules/custom/admin_job/assets/images/spinning-loading.gif">
</div>

<script>
$(document).ready(function() {
  $('#edit-submit').click(function(e){
    e.preventDefault(); // 阻止表单默认提交，确保先显示加载层再执行后续逻辑
    $("#spinner").show();
    
    // 替换成你实际的答题结果判断逻辑
    const isAnswerCorrect = true; // true代表答对，false代表答错
    
    setTimeout(function() {
      $("#spinner").hide(); // 5秒后隐藏加载层
      // 根据结果跳转对应页面
      if (isAnswerCorrect) {
        window.location.href = "/胜利页面URL";
      } else {
        window.location.href = "/失败页面URL";
      }
    }, 5000); // 5秒延迟执行
  });
});
</script>

关键修改说明 #

• e.preventDefault()：阻止表单默认提交行为，避免页面直接跳转导致加载层无法显示
• 完善setTimeout逻辑：5秒后先隐藏加载层，再根据答题结果跳转到对应页面
• 全屏CSS：通过position: fixed和宽高100%实现全屏覆盖，半透明背景提升用户体验

内容的提问来源于stack exchange，提问作者Souvik Kumar Paul