Bootstrap警告框只弹一次的实现方法

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《Bootstrap警告框只显示一次的解决方法》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

本文旨在解决使用 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/......'; // 替换为你的实际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' 类来隐藏警告框
}

注意事项与总结

1. 理解 Bootstrap 行为： 深入理解 Bootstrap 组件的 data-* 属性行为至关重要。data-bs-dismiss="alert" 的设计初衷是让警告框在被关闭后不再干扰页面布局，因此它选择移除元素。
2. 自定义控制： 当你需要更精细地控制组件的生命周期（例如，仅隐藏而非移除），通常需要移除 Bootstrap 的默认 data-* 属性，并使用 JavaScript 进行自定义控制。
3. 类名管理： 使用 classList.add(), classList.remove(), classList.toggle() 是管理元素显示状态的推荐方式，因为它直接操作 CSS 类，效率高且易于维护。
4. 可访问性： 虽然本解决方案解决了功能问题，但在实际应用中，还应考虑可访问性。当警告框显示或隐藏时，确保屏幕阅读器用户能感知到这些变化。例如，可以在警告框显示时，将焦点转移到警告框内部，并在其隐藏时将焦点移回表单。

通过以上修改，我们成功地将 Bootstrap 警告框从“一次性”提示变为“可重复使用”的反馈机制，确保了用户每次提交表单后都能收到清晰的成功提示，并能自由地关闭它，而不会影响后续的交互。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。