本文旨在解决使用 Bootstrap 5 警告框作为表单提交成功提示时，仅能显示一次的问题。核心原因在于 Bootstrap 默认的 data-bs-dismiss=”alert” 属性会彻底移除警告框元素。解决方案是移除该属性，并结合 JavaScript 手动控制警告框的显示与隐藏，通过添加或移除 d-none 类来实现元素的持久化管理，确保每次提交后都能正确显示提示。
问题背景与分析
在网页开发中，我们经常需要在用户提交表单后显示一个反馈消息，例如“消息已发送成功”。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 结构：
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/......'; // 替换为你的实际URLconst 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)：
表单提交与自定义警告框 body { padding: 20px; } .form-container { max-width: 500px; margin: 0 auto; padding: 20px; border: 1px solid #eee; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }联系我们
感谢！ 您的消息已收到。
JavaScript (例如 script.js)：
const scriptURL = 'https://script.google.com/macros/s/AKfycbzAovQklbPcjlV0Z0MAgTrvDR--cWl3mhWyfwcOneOcSbRPBnk_cSTCP2LOcUCiG5/exec'; // 替换为你的实际 Google Apps Script URLconst 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 警告框从“一次性”提示变为“可重复使用”的反馈机制，确保了用户每次提交表单后都能收到清晰的成功提示，并能自由地关闭它，而不会影响后续的交互。
以上就是解决 Bootstrap 警告框提交后仅显示一次的问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1580280.html
微信扫一扫 
支付宝扫一扫 
