问题描述
在使用 bootstrap 5 构建网页表单时，我们常希望在表单成功提交后弹出一个提示信息（例如一个 alert 模态框）。然而，一个常见的困扰是，当用户首次点击发送按钮并看到提示信息后，如果他们点击了提示框的关闭按钮，那么在后续的表单提交中，该提示框将不再显示，除非刷新页面。这极大地影响了用户体验和功能的连贯性。
问题根源分析
这个问题的核心在于 Bootstrap 5 Alert 组件的默认行为。当我们为 Alert 的关闭按钮添加 data-bs-dismiss="alert" 属性时，Bootstrap 会在用户点击该按钮后，将整个 Alert 元素从页面的 DOM (Document Object Model) 结构中完全移除，而不仅仅是隐藏它。
考虑以下 HTML 结构：
感谢！ 您的消息已收到。
当 JavaScript 代码通过移除 d-none 类来显示此 Alert，然后用户点击 btn-close 按钮时，由于 data-bs-dismiss="alert" 的存在，这个
解决方案
要解决此问题，我们需要改变 Alert 关闭按钮的默认行为，使其在关闭时不再从 DOM 中移除元素，而是仅仅将其隐藏。这可以通过以下两个步骤实现：
1. 修改 HTML 结构
移除关闭按钮上的 data-bs-dismiss="alert" 属性，并添加一个自定义的 onclick 事件处理函数来控制 Alert 的隐藏。
原始 HTML (存在问题):
感谢！ 您的消息已收到。
修改后的 HTML:
感谢！ 您的消息已收到。
这里我们假设自定义的 JavaScript 函数名为 hideMyAlert()。
2. 修改 JavaScript 逻辑
我们需要在 JavaScript 中实现两个关键功能：
- 在表单提交成功后，通过移除 d-none 类来显示 Alert。
- 定义 hideMyAlert() 函数，当用户点击关闭按钮时，通过添加 d-none 类来隐藏 Alert。
原始 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');
myAlert.classList.toggle('d-none'); // 首次显示有效，但如果元素被移除则失效
form.reset();
console.log('Success!', response);
})
.catch(error => console.error('Error!', error.message));
});修改后的 JavaScript:
const scriptURL = 'https://script.google.com/macros/s/AKfycbzAovQklbPcjlV0Z0MAgTrvDR--cWl3mhWyfwcOneOcSbRPBnk_cSTCP2LOcUCiG5/exec'; // 替换为你的实际 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' 类来显示 Alert
myAlert.classList.remove('d-none');
form.reset(); // 重置表单
console.log('Success!', response);
})
.catch(error => console.error('Error!', error.message));
});
// 定义自定义函数，用于在点击关闭按钮时隐藏 Alert
function hideMyAlert() {
myAlert.classList.add('d-none'); // 添加 'd-none' 类来隐藏 Alert
}在修改后的 JavaScript 代码中：
- 我们明确地使用 myAlert.classList.remove('d-none') 来显示 Alert，而不是 toggle，这确保了 Alert 总是被显示出来。
- 我们定义了一个全局函数 hideMyAlert()，它在被调用时，会给 myAlert 元素添加 d-none 类，从而使其隐藏，但不会从 DOM 中移除。
完整示例代码
结合上述 HTML 和 JavaScript 修改，以下是完整的实现代码：
HTML 文件 (例如 index.html):
表单提交与可重复显示 Alert
联系我们
感谢！ 您的消息已收到。
注意事项与总结
- 理解 data-bs-dismiss: 这是解决问题的关键。务必理解 Bootstrap 组件的默认行为，尤其是在涉及 DOM 操作时。
- 明确的显示/隐藏控制: 在 JavaScript 中，使用 classList.remove('d-none') 来显示元素，使用 classList.add('d-none') 来隐藏元素，而不是依赖 toggle，这样可以避免状态混淆，使逻辑更清晰。
- 错误处理: 在实际应用中，fetch 请求的 .catch() 块中应该包含更健壮的错误处理逻辑，例如显示一个错误提示给用户。
- 选择器精度: 如果页面中有多个 alert 类元素，建议使用更具体的选择器（例如 id 或更具体的类名组合）来确保操作的是正确的 Alert 元素，如示例中使用了 .my-alert。
- CSS d-none: 确保你的 CSS 中 d-none 类被正确定义为 display: none !important;，以保证它能覆盖其他显示样式。
通过以上方法，我们成功地解决了 Bootstrap Alert 模态框在首次关闭后无法再次显示的问题，实现了其可重复使用的功能，从而提升了用户界面的交互性和鲁棒性。
