解决 Bootstrap Alert 模态框重复显示失效问题

---

本文旨在解决使用 Bootstrap 5 Alert 模态框时，其在首次显示并关闭后无法再次弹出的问题。核心在于理解 data-bs-dismiss="alert" 属性会从 DOM 中完全移除 Alert 元素，而非仅仅隐藏。通过移除该属性并结合自定义 J*aScript 函数来控制 Alert 的显示与隐藏，可以实现模态框的多次有效复用。

问题描述

在使用 bootstrap 5 构建网页表单时，我们常希望在表单成功提交后弹出一个提示信息（例如一个 alert 模态框）。然而，一个常见的困扰是，当用户首次点击发送按钮并看到提示信息后，如果他们点击了提示框的关闭按钮，那么在后续的表单提交中，该提示框将不再显示，除非刷新页面。这极大地影响了用户体验和功能的连贯性。

问题根源分析

这个问题的核心在于 Bootstrap 5 Alert 组件的默认行为。当我们为 Alert 的关闭按钮添加 data-bs-dismiss="alert" 属性时，Bootstrap 会在用户点击该按钮后，将整个 Alert 元素从页面的 DOM (Document Object Model) 结构中完全移除，而不仅仅是隐藏它。

考虑以下 HTML 结构：

<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>

当 J*aScript 代码通过移除 d-none 类来显示此 Alert，然后用户点击 btn-close 按钮时，由于 data-bs-dismiss="alert" 的存在，这个

元素会被从 DOM 中删除。一旦元素被删除，后续的 J*aScript 操作（例如再次移除 d-none 类）将无法找到该元素并对其进行操作，因此 Alert 也无法再次显示。

解决方案

要解决此问题，我们需要改变 Alert 关闭按钮的默认行为，使其在关闭时不再从 DOM 中移除元素，而是仅仅将其隐藏。这可以通过以下两个步骤实现：

1. 修改 HTML 结构

移除关闭按钮上的 data-bs-dismiss="alert" 属性，并添加一个自定义的 onclick 事件处理函数来控制 Alert 的隐藏。

原始 HTML (存在问题):

<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>

修改后的 HTML:

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

这里我们假设自定义的 J*aScript 函数名为 hideMyAlert()。

YouMind

AI内容创作和信息整理平台

207 查看详情

2. 修改 J*aScript 逻辑

我们需要在 J*aScript 中实现两个关键功能：

• 在表单提交成功后，通过移除 d-none 类来显示 Alert。
• 定义 hideMyAlert() 函数，当用户点击关闭按钮时，通过添加 d-none 类来隐藏 Alert。

原始 J*aScript (存在问题):

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');
      myAlert.classList.toggle('d-none'); // 首次显示有效，但如果元素被移除则失效
      form.reset();
      console.log('Success!', response);
    })
    .catch(error => console.error('Error!', error.message));
});

修改后的 J*aScript:

const scriptURL = 'https://script.google.com/macros/s/AKfycbzAovQklbPcjlV0Z0MAgTrvDR--cWl3mhWyfwcOneOcSbRPBnk_cSTCP2LOcUCiG5/exec'; // 替换为你的实际 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' 类来显示 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
}

在修改后的 J*aScript 代码中：

• 我们明确地使用 myAlert.classList.remove('d-none') 来显示 Alert，而不是 toggle，这确保了 Alert 总是被显示出来。
• 我们定义了一个全局函数 hideMyAlert()，它在被调用时，会给 myAlert 元素添加 d-none 类，从而使其隐藏，但不会从 DOM 中移除。

完整示例代码

结合上述 HTML 和 J*aScript 修改，以下是完整的实现代码：

HTML 文件 (例如 index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单提交与可重复显示 Alert</title>
    <!-- 引入 Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body { padding: 20px; }
        .container { max-width: 600px; margin-top: 50px; }
        .my-alert { margin-bottom: 20px; }
        .d-none { display: none !important; } /* 确保 d-none 有效 */
    </style>
</head>
<body>
    <div class="container">
        <h2>联系我们</h2>

        <!-- 成功提示框，初始隐藏 -->
        <div class="alert my-alert alert-warning alert-dismissible fade show d-none" role="alert">
            <strong>感谢！</strong> 您的消息已收到。
            <!-- 移除 data-bs-dismiss，添加自定义 onclick -->
            <button type="button" class="btn-close" onclick="hideMyAlert()" aria-label="Close"></button>
        </div>

        <form name="portofolio-contact-form">
            <div class="mb-3">
                <label for="name" class="form-label">姓名</label>
                <input type="text" class="form-control" id="name" name="name" required>
            </div>
            <div class="mb-3">
                <label for="email" class="form-label">邮箱</label>
                <input type="email" class="form-control" id="email" name="email" required>
            </div>
            <div class="mb-3">
                <label for="message" class="form-label">消息</label>
                <textarea class="form-control" id="message" name="message" rows="3" required></textarea>
            </div>
            <button type="submit" class="btn btn-primary my-btn">发送</button>
            <button class="btn btn-primary btn-loading d-none" type="button" disabled>
                <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
                <span role="status">加载中...</span>
            </button>
        </form>
    </div>

    <!-- 引入 Bootstrap 5 JS (如果需要其他 Bootstrap 组件，例如 Modal、Dropdown等) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        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
        }
    </script>
</body>
</html>

注意事项与总结

• 理解 data-bs-dismiss: 这是解决问题的关键。务必理解 Bootstrap 组件的默认行为，尤其是在涉及 DOM 操作时。
• 明确的显示/隐藏控制: 在 J*aScript 中，使用 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 模态框重复显示失效问题的详细内容，更多请关注其它相关文章！

# javascript  # css  # 模态  # 海口网站建设制作设计  # 选择器  # 提示信息  # 弹出  # 使其  # 金湖seo推广价格  # seo研究中心骗  # 顺德区咨询网站建设对象  # 那个网站建设素材图片  # 企业网站推广的特征  # 网站建设高端厂家有哪些  # 古县网站seo优化排名  # 食堂文化网站建设  # 临湘公司网站建设  # 首次  # 您的  # 自定义  # 表单  # 移除  # cdn  # ai  # mac  # ssl  # app  # go  # bootstrap  # js  # html  # java 

相关栏目： 【 Google疑问12 】 【 Facebook疑问10 】 【 优化推广96088 】 【 技术知识133117 】 【 IDC资讯59369 】 【 网络运营7196 】 【 IT资讯61894 】

相关推荐： 抄漫画官网防走失地址_抄漫画最新漫画完整版阅读入口  J*a实现任务清单管理_集合框架综合入门练手  《杖剑传说》食谱大全  Win10运行窗口在哪里打开 Win10调出运行命令框快捷键【技巧】  《律学法考》查看学习数据方法  C++如何使用CMake构建项目_C++ CMakeLists.txt编写入门教程  Pandas中基于动态偏移量实现DataFrame列值位移的策略  动漫岛汉化官网网 动漫岛官方动漫汉化地址  J*aScript包管理器_Npm与Yarn对比  以下哪一个是适应长期护理制度发展而设立的新职业  SQL聚合查询、联接与筛选：GROUP BY 子句的正确使用与常见陷阱  使用 J*aScript 随机化 CSS Grid 布局中的元素顺序  sf漫画官网登录入口直达_sf漫画官方正版网址  cad怎么隐藏指定的图层_cad隐藏或冻结图层方法  可米酷漫画在线阅读入口_ 可米酷漫画官网直达链接  PHP页面重载后变量状态保持：实现用户档案连续浏览的教程  J*a中为什么强调组合优于继承_组合模式带来的灵活性与可维护性解析  B站怎么快速升级 B站用户等级提升攻略【详解】  sublime如何撤销关闭的标签页_sublime重新打开已关闭文件技巧  银信通自动开通原因揭秘  猫眼电影app怎么查询电影院的营业时间_猫眼电影影院营业时间查询教程  iCloud官方网站 iCloud网页版在线登录入口  163邮箱网页版入口 163邮箱在线使用  德邦快递查询入口登录官网 德邦快递单号查询系统入口  123网页端官方登录页 123邮箱网页版即时通讯服务  漫蛙漫画官方网站使用_漫蛙manwa网页版在线入口教程  FullCalendar自定义按钮样式定制指南  4399正版网页版入口高清直达链接  C++如何将字符串转换为大写或小写_C++ transform函数的使用技巧  拷贝漫画2025网页版入口 拷贝漫画官网免费看全集  抖音商城官网是什么_抖音商城官方网址与访问方法  CodeIgniter 3 连接 SQL Server：正确获取查询结果的教程  豆包AI怎样为教育场景定制答疑逻辑_为教育场景定制豆包AI答疑逻辑方案【方案】  使用Google服务账号实现Google Drive API无缝集成与文件访问  多多买菜门店端app订单查看方法  申通快件单号查询平台 申通包裹物流动态跟踪  荣耀盒子应用管理技巧  漫蛙manwa漫画官网链接_漫蛙manwa最新可用网址推荐  《kimi智能助手》制作ppt教程  Selenium自动化：利用键盘模拟解决复杂日期输入框输入问题  t3出行如何使用微信支付  Safari浏览器自动填表功能失效怎么办 Safari表单管理修复  Linux如何开发轻量级数据服务模块_Linux服务化设计  b站怎么设置动态仅粉丝可见_b站动态粉丝可见设置方法  《绿竹漫游》关闭消息通知方法  海外搜索引擎推广效果怎么样,怎么分析效果！  荣耀magicv5怎么上手测评  Win10通知横幅停留时间修改 Win10自定义通知显示时长【技巧】  如何查询国外邮政编码_国外邮政编码查询的多种有效途径  如何使用 Optional 类型并满足 Pylint 的类型检查 

 2025-10-01