Spring Boot+Thymeleaf中动态JavaScript弹窗功能失效问题排查

核心问题分析 #

直接打开HTML正常，但Spring Boot环境下异常，主要是静态资源路径错误、事件绑定缺失、Bootstrap依赖不全、DOM加载顺序问题导致的。

分步解决方案 #

1. 调整项目静态资源结构 #

将style.css、script.js、tick.png全部移动到Spring Boot默认静态资源目录：

src/main/resources/static/

2. 修改Thymeleaf页面代码（test.html） #

修复资源引用路径、补充事件绑定、完善Bootstrap依赖：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 补充Bootstrap 4所需的jQuery和Popper.js依赖 -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <!-- 用Thymeleaf语法引用静态资源 -->
    <link rel="stylesheet" th:href="@{/style.css}" />
</head>
<body>
<div class="container">
  <!-- 给Submit按钮绑定打开弹窗事件 -->
  <button type="button" class="btn" onclick="openPopup()">Submit</button>
  <!-- 移除弹窗div的onclick事件，避免干扰 -->
  <div class="popup" id="popup">
    <img th:src="@{/tick.png}" >
    <h2>Thank you!</h2>
    <p>Your details bla bla simple message.</p>
    <button type="button" onclick="closePopup()">OK</button>
  </div>
</div>
<!-- 将script放到body末尾，确保DOM加载完成后执行 -->
<script type="text/javascript" th:src="@{/script.js}"></script>
</body>
</html>

3. 修复JavaScript代码（script.js） #

确保DOM加载完成后再获取弹窗元素，避免null错误：

let popup;
// 等待DOM完全加载后初始化
document.addEventListener('DOMContentLoaded', function() {
    popup = document.getElementById("popup");
});

function openPopup() {
    if(popup) {
        popup.classList.add("open-popup");
    }
}

function closePopup() {
    if(popup) {
        popup.classList.remove("open-popup");
    }
}

修改说明 #

• 静态资源路径：Spring Boot仅识别static目录下的静态资源，Thymeleaf的@{/path}语法会自动拼接正确的资源URL，解决本地打开正常但Spring Boot下资源404的问题。
• 事件绑定：原Submit按钮未绑定openPopup()，点击无反应；弹窗div的onclick属于冗余绑定，移除后避免误触发。
• Bootstrap依赖：Bootstrap 4的JS必须依赖jQuery和Popper.js，缺失会导致控制台报错，阻断JS执行。
• DOM加载顺序：将script放到body末尾或用DOMContentLoaded事件，确保获取弹窗元素时DOM已渲染完成，避免变量为null。

内容的提问来源于stack exchange，提问作者Yunus Emrah Uluçay