解决Bootstrap Alert只显示一次问题的教程-html教程-PHP中文网

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

霞舞

发布： 2025-10-01 12:32:20

原创

762人浏览过

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

本教程旨在解决使用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"属性的<button>元素）被点击时，Bootstrap的JavaScript会执行一个操作：它不仅会隐藏Alert，还会将整个Alert元素从DOM（文档对象模型）中完全移除。一旦元素被移除，它就不再是页面结构的一部分，自然无法再次显示。

以下是一个典型的初始HTML和JavaScript代码示例，展示了导致此问题的情况：

初始HTML (Alert组件):

<div class="alert my-alert alert-warning alert-dismissible fade show d-none" role="alert">
  <strong>感谢！</strong> 您的消息已收到。
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

登录后复制

初始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代码：

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

修改后的HTML (Alert组件):

<div class="alert my-alert alert-warning alert-dismissible fade show d-none" role="alert">
    <strong>感谢！</strong> 您的消息已收到。
    <!-- 移除 data-bs-dismiss="alert"，添加 onclick 事件 -->
    <button type="button" class="btn-close" onclick="hideMyAlert()" aria-label="Close"></button>
</div>

登录后复制

修改后的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中移除，从而实现可重复使用的提示功能。

以上就是解决Bootstrap Alert只显示一次问题的教程的详细内容，更多请关注php中文网其它相关文章！