bootstrap 5 已弃用 `data-toggle` 和 `data-dismiss` 等旧版 data 属性，改用带 `bs-` 前缀的新属性（如 `data-bs-toggle`），若未更新会导致 modal 完全无响应且控制台静默报错。
在 Bootstrap 5 中，Modal 组件的 JavaScript 行为完全依赖于语义化、版本特定的 data-* 属性。你提供的代码中使用的是 Bootstrap 4 风格的 data-toggle="modal" 和 data-dismiss="modal"，而当前引入的是 Bootstrap 5.x 的 CSS 和 JS（通过 @popperjs/core 和 bootstrap@5.x CDN），属性名不匹配将导致事件绑定失败，Modal 无法触发——这也是为什么点击按钮毫无反应、控制台也无报错（因逻辑被静默忽略）。
✅ 正确写法（Bootstrap 5+）
将按钮和关闭按钮中的 data-toggle / data-dismiss 替换为带 bs- 前缀的新属性：
? 提示：Bootstrap 5 移除了对 jQuery 的依赖，因此无需额外引入 jQuery（尽管你已引入，但不会干扰；不过建议移除以避免潜在冲突或冗余加载）。
? 完整修正后的关键片段（仅展示需修改部分）
? 推荐升级细节：
- 使用
- 确保 Bootstrap 5 的 JS 文件在所有自定义脚本之后加载；
- 若使用构建工具（如 Webpack/Vite），请确认未混用 Bootstrap 4 和 5 的模块。
⚠️ 其他常见排查点
- 检查 Bootstrap 版本一致性：确保 引入的 CSS 与
- 验证 DOM 加载时机：Modal 相关 HTML 必须在 JS 执行前已存在于 DOM 中（你的写法满足）；
- 禁用浏览器扩展干扰：部分广告拦截或隐私插件可能阻断 CDN 资源（可检查 Network 标签页是否 404）；
- 无障碍属性完整性：aria-labelledby 和 aria-hidden 应正确指向/匹配元素 ID，否则屏幕阅读器可能异常（虽不影响功能，但属最佳实践）。
完成上述修改后，点击按钮即可正常触发展开动画，Modal 将按预期显示、关闭与交互。这是 Bootstrap 5 迁移中最易被忽视却高频发生的兼容性问题。
