解决Bootstrap Alert只显示一次问题的教程

陆砚码

2026-09-15 • 👁 1人浏览过

本教程旨在解决使用Bootstrap 5 Alert组件作为表单提交成功提示时，其只能显示一次的问题。核心原因在于Bootstrap的data-bs-dismiss属性会将Alert元素从DOM中移除。通过移除该属性，并结合自定义JavaScript函数来控制Alert的显示与隐藏，可以确保Alert在每次表单成功提交后都能正确弹出并可重复使用。理解问题：Bootstrap Alert的默认行为在web开发中，我们经常需要在用户完成某个操作（如表单提交）后提供即时反馈。 bootstrap 的alert组件是一个常用的选择，它提供了一种简洁美观的提示方式。然而，当开发者尝试将一个bootstrap alert用作可重复使用的成功提示（例如，每次表单提交成功后都显示一次），可能会遇到一个常见的问题：alert只显示一次，之后无论如何触发，它都不会再次出现，除非刷新页面。这个问题的根源在于Bootstrap Alert的默认关闭机制。当Alert组件的关闭按钮（通常是一个带有data-bs-dismiss="alert"属性的


  感谢！ 您的消息已收到。

初始JavaScript (表单提交逻辑):

const scriptURL = 'https://script.google.com/macros/......'; // 您的Google Apps Script URL
const form = document.forms['portofolio-contact-form'];
const myAlert = document.querySelector('.my-alert'); // 选择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');    // 显示Alert (移除d-none)
      form.reset(); // 重置表单
      console.log('Success!', response);
    })
    .catch(error => console.error('Error!', error.message));
});

在这段代码中，当表单成功提交后，myAlert.classList.toggle('d-none')会移除d-none类，使Alert显示。然而，一旦用户点击Alert上的关闭按钮，由于data-bs-dismiss="alert"的存在，Alert元素会被从DOM中移除，导致后续提交无法再次显示它。解决方案：自定义Alert关闭行为要解决这个问题，我们需要阻止Bootstrap的默认移除行为，转而使用自定义的JavaScript来控制Alert的显示和隐藏。核心思路是：移除关闭按钮上的data-bs-dismiss="alert"属性。为关闭按钮添加一个onclick事件，调用一个自定义函数。这个自定义函数负责在用户点击关闭按钮时，仅仅通过添加d-none类来隐藏Alert，而不是将其从DOM中移除。下面是修改后的HTML和JavaScript代码： Eclipse导入Android或其他的JAVA项目的正确方法 WORD版本文档主要讲述的是Eclipse导入Android或其他的JAVA项目的正确方法；希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看下载修改后的HTML (Alert组件):


    感谢！ 您的消息已收到。

修改后的JavaScript (表单提交及自定义关闭逻辑):

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'); // 选择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
}

关键改动解析 HTML中的Alert关闭按钮: data-bs-dismiss="alert" 被移除。这个属性是导致Alert元素被DOM移除的罪魁祸首。 onclick="hideMyAlert()" 被添加。现在，当用户点击关闭按钮时，会调用我们自定义的hideMyAlert JavaScript函数。 JavaScript中的表单提交成功处理: myAlert.classList.remove('d-none'); 明确地移除了d-none类。这意味着每次表单成功提交后，Alert都会被显示出来。新增的JavaScript函数 hideMyAlert(): function hideMyAlert() { myAlert.classList.add('d-none'); } 这个函数的作用是，当它被调用时，会给myAlert元素添加d-none类。d-none是Bootstrap提供的实用类，用于设置display: none !important;，从而隐藏元素。通过这种方式，Alert只是被隐藏，但仍然保留在DOM中，可以在下次需要时再次显示。注意事项与最佳实践 DOM操作的粒度: 这种方法通过控制CSS类（d-none）来管理元素的可见性，而不是直接移除/添加元素，这是一种更高效且灵活的DOM操作方式。可访问性: 确保你的自定义关闭机制仍然能提供良好的可访问性。Bootstrap的data-bs-dismiss通常会处理焦点管理等问题。虽然我们的简单d-none切换可能不会自动处理这些，但对于简单的提示，通常影响不大。如果需要更高级的可访问性，可能需要手动管理焦点。错误处理: 教程中的fetch请求包含了.catch()块来处理网络或API错误。在实际应用中，当出现错误时，你可能需要显示一个不同的Alert（例如，一个红色的错误提示Alert），而不是成功的提示。 CSS过渡效果: Bootstrap Alert默认带有fade show类，这提供了平滑的显示/隐藏过渡效果。我们的d-none切换会立即隐藏元素。如果希望保留过渡效果，可以考虑使用classList.remove('show')和classList.add('show')，并配合CSS的transition属性，或者手动触发Bootstrap的JS API（new bootstrap.Alert(myAlert).hide()），但这会引入更多复杂性，且仍需确保元素不被移除。对于本教程解决的“只显示一次”问题，上述解决方案已经足够。代码组织: 在大型项目中，建议将hideMyAlert这样的辅助函数封装到更模块化的结构中，例如一个表单处理模块。通过上述修改，您的Bootstrap Alert组件将能够在每次表单成功提交后正确显示，并在用户点击关闭按钮后隐藏，而不会被从DOM中移除，从而实现可重复使用的提示功能。

相关文章