问题背景与分析
在网页开发中，我们经常需要在用户提交表单后显示一个反馈消息，例如“消息已发送成功”。Bootstrap 提供的警告框（Alert）组件是实现这一功能的常用选择。然而，许多开发者会遇到一个常见问题：当用户点击警告框的关闭按钮后，该警告框就再也无法通过 JavaScript 显示出来，除非刷新页面。
最初的实现通常包括以下 HTML 结构和 JavaScript 逻辑：
初始 HTML 结构：
Thank you! We have received your message.
初始 JavaScript 逻辑（简化）：
const myAlert = document.querySelector('.alert');
// ... 其他DOM元素和表单提交逻辑
form.addEventListener('submit', e => {
e.preventDefault();
// ... 发送数据逻辑
fetch(scriptURL, { method: 'POST', body: new FormData(form) })
.then(response => {
myAlert.classList.toggle('d-none'); // 期望显示警告框
form.reset();
console.log('Success!', response);
})
.catch(error => console.error('Error!', error.message));
});在这种设置下，第一次表单提交成功后，myAlert.classList.toggle('d-none') 会移除 d-none 类，使警告框显示。然而，一旦用户点击了警告框右上角的关闭按钮，警告框就会永久消失。
问题根源：
问题的核心在于 Bootstrap 警告框的 data-bs-dismiss="alert" 属性。根据 Bootstrap 的官方文档说明，当一个带有 data-bs-dismiss="alert" 属性的关闭按钮被点击时，它不仅会隐藏警告框，还会将警告框元素从 DOM 结构中完全移除。这意味着，即使你尝试再次通过 JavaScript 操作该元素（例如 myAlert.classList.toggle('d-none')），由于元素已不存在于 DOM 中，操作自然会失效。
解决方案
为了解决警告框被移除的问题，我们需要改变其关闭行为，使其在关闭时仅隐藏而非移除。这需要对 HTML 和 JavaScript 代码进行相应调整。
1. 修改 HTML 结构
首先，从关闭按钮中移除 data-bs-dismiss="alert" 属性。取而代之的是，我们将添加一个自定义的 onclick 事件处理器，用于在用户点击关闭按钮时执行我们自己的 JavaScript 函数来隐藏警告框。
更新后的 HTML 结构：
解决问题如下：只列举最近用户提交问题，其余问题前面几次补丁已经解决，不在复述。1、解决搜索问题。以前搜索一定要确定到省下面的某个市，这个不符合用户体验。 现在改为，省--所有城市（默认为所有城市，也可以自己选择某个市）。2、解决首页推荐产品部显示问题。（以前没有考虑多个其他浏览器）3、解决供应、求购 今日产品显示问题。（理由同上）4、解决收藏商家、供应、求购问题。 （链接错误）5、解决后台分类过
Thank you! We have received your message.
这里我们将 data-bs-dismiss="alert" 替换为 onclick="hideCustomAlert()"。hideCustomAlert() 将是我们自定义的 JavaScript 函数，负责隐藏警告框。
2. 修改 JavaScript 逻辑
接下来，我们需要调整 JavaScript 代码，包括：
- 确保在表单提交成功时，明确地“显示”警告框（移除 d-none 类）。
- 创建 hideCustomAlert() 函数，用于在用户点击关闭按钮时“隐藏”警告框（添加 d-none 类）。
更新后的 JavaScript 逻辑：
const scriptURL = 'https://script.google.com/macros/......'; // 替换为你的实际URL
const form = document.forms['portofolio-contact-form'];
const myAlert = document.querySelector('.alert');
const btnKirim = document.querySelector('.my-btn'); // 假设是提交按钮
const btnLoading = document.querySelector('.btn-loading'); // 假设是加载状态按钮
// 表单提交事件监听器
form.addEventListener('submit', e => {
e.preventDefault(); // 阻止表单默认提交行为
// 切换按钮状态（显示加载中，隐藏提交按钮）
btnLoading.classList.toggle('d-none');
btnKirim.classList.toggle('d-none');
// 发送表单数据
fetch(scriptURL, { method: 'POST', body: new FormData(form) })
.then(response => {
// 恢复按钮状态
btnLoading.classList.toggle('d-none');
btnKirim.classList.toggle('d-none');
// 明确移除 'd-none' 类来显示警告框
myAlert.classList.remove('d-none');
form.reset(); // 重置表单
console.log('Success!', response);
})
.catch(error => console.error('Error!', error.message));
});
// 自定义函数：当用户点击警告框的关闭按钮时调用，用于隐藏警告框
function hideCustomAlert() {
myAlert.classList.add('d-none'); // 添加 'd-none' 类来隐藏警告框
}关键改动点：
- 在 fetch 请求成功的回调中，使用 myAlert.classList.remove('d-none') 明确地移除 d-none 类，确保警告框被显示。
- 新增 hideCustomAlert() 函数，其作用是当用户点击关闭按钮时，通过 myAlert.classList.add('d-none') 将 d-none 类添加回去，从而隐藏警告框。这样，警告框元素始终保留在 DOM 中，下次提交时仍可被操作。
完整代码示例
将上述 HTML 和 JavaScript 结合，一个完整的解决方案示例如下：
HTML (例如 index.html)：
表单提交与自定义警告框
联系我们
感谢！ 您的消息已收到。
JavaScript (例如 script.js)：
const scriptURL = 'https://script.google.com/macros/s/AKfycbzAovQklbPcjlV0Z0MAgTrvDR--cWl3mhWyfwcOneOcSbRPBnk_cSTCP2LOcUCiG5/exec'; // 替换为你的实际 Google Apps Script URL
const form = document.forms['portofolio-contact-form'];
const myAlert = document.querySelector('.my-alert'); // 使用更具体的类名选择
const btnKirim = document.querySelector('.my-btn');
const btnLoading = document.querySelector('.btn-loading');
form.addEventListener('submit', e => {
e.preventDefault(); // 阻止表单默认提交
// 切换按钮显示状态：隐藏提交按钮，显示加载按钮
btnLoading.classList.remove('d-none');
btnKirim.classList.add('d-none');
// 发送数据到 Google Apps Script
fetch(scriptURL, { method: 'POST', body: new FormData(form) })
.then(response => {
// 恢复按钮显示状态：隐藏加载按钮，显示提交按钮
btnLoading.classList.add('d-none');
btnKirim.classList.remove('d-none');
// 显示警告框：移除 'd-none' 类
myAlert.classList.remove('d-none');
form.reset(); // 重置表单内容
console.log('Success!', response);
})
.catch(error => {
console.error('Error!', error.message);
// 错误时也恢复按钮状态，并可显示错误警告
btnLoading.classList.add('d-none');
btnKirim.classList.remove('d-none');
// 可以在此处显示一个错误提示警告框
});
});
// 自定义函数：隐藏警告框
function hideCustomAlert() {
myAlert.classList.add('d-none'); // 添加 'd-none' 类来隐藏警告框
}注意事项与总结
- 理解 Bootstrap 行为： 深入理解 Bootstrap 组件的 data-* 属性行为至关重要。data-bs-dismiss="alert" 的设计初衷是让警告框在被关闭后不再干扰页面布局，因此它选择移除元素。
- 自定义控制： 当你需要更精细地控制组件的生命周期（例如，仅隐藏而非移除），通常需要移除 Bootstrap 的默认 data-* 属性，并使用 JavaScript 进行自定义控制。
- 类名管理： 使用 classList.add(), classList.remove(), classList.toggle() 是管理元素显示状态的推荐方式，因为它直接操作 CSS 类，效率高且易于维护。
- 可访问性： 虽然本解决方案解决了功能问题，但在实际应用中，还应考虑可访问性。当警告框显示或隐藏时，确保屏幕阅读器用户能感知到这些变化。例如，可以在警告框显示时，将焦点转移到警告框内部，并在其隐藏时将焦点移回表单。
通过以上修改，我们成功地将 Bootstrap 警告框从“一次性”提示变为“可重复使用”的反馈机制，确保了用户每次提交表单后都能收到清晰的成功提示，并能自由地关闭它，而不会影响后续的交互。
