本文旨在解决使用 Bootstrap 5 Alert 模态框时，其在首次显示并关闭后无法再次弹出的问题。核心在于理解 data-bs-dismiss=”alert” 属性会从 DOM 中完全移除 Alert 元素，而非仅仅隐藏。通过移除该属性并结合自定义 JavaScript 函数来控制 Alert 的显示与隐藏，可以实现模态框的多次有效复用。
问题描述
在使用 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/......'; // 示例 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'); 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'; // 替换为你的实际 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' 类来显示 Alert myAlert.classList.remove('d-none'); form.reset(); // 重置表单 console.log('Success!', response); }) .catch(error => console.error('Error!', error.message));});// 定义自定义函数，用于在点击关闭按钮时隐藏 Alertfunction 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 body { padding: 20px; } .container { max-width: 600px; margin-top: 50px; } .my-alert { margin-bottom: 20px; } .d-none { display: none !important; } /* 确保 d-none 有效 */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.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.remove('d-none'); // 显示 Alert form.reset(); console.log('Success!', response); }) .catch(error => { console.error('Error!', error.message); // 错误处理，例如显示一个错误提示 btnLoading.classList.toggle('d-none'); btnKirim.classList.toggle('d-none'); }); }); // 自定义函数，用于隐藏 Alert function hideMyAlert() { myAlert.classList.add('d-none'); // 隐藏 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 模态框在首次关闭后无法再次显示的问题，实现了其可重复使用的功能，从而提升了用户界面的交互性和鲁棒性。
以上就是解决 Bootstrap Alert 模态框重复显示失效问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1580205.html
微信扫一扫 
支付宝扫一扫 
