Bootstrap模态框关闭后恢复提交按钮颜色的实现方法

咱们先把问题捋清楚：你已经实现了点击id为send的提交按钮时，按钮变色并弹出Bootstrap模态框，但模态框关闭后，按钮一直保持点击后的颜色，没回到初始状态。核心问题就是——你还没给模态框的关闭动作绑定「恢复按钮原色」的逻辑。

解决方案思路 #

要搞定这个问题，关键就是监听Bootstrap模态框的关闭完成事件，在模态框彻底关闭的瞬间，把按钮的样式还原回去。

完整代码实现 #

假设你的按钮初始样式是Bootstrap的btn-primary，点击后切换成btn-success（你可以根据自己实际用的样式类/自定义颜色调整），完整代码如下：

// 获取提交按钮和目标模态框元素
const submitBtn = document.getElementById("send");
const targetModal = document.getElementById("你的模态框ID"); // 记得替换成你实际的模态框ID

// 按钮点击事件：切换颜色 + 弹出模态框
submitBtn.onclick = function() {
  // 移除初始样式，添加点击后的样式
  submitBtn.classList.remove("btn-primary");
  submitBtn.classList.add("btn-success");
  
  // 手动触发模态框弹出（如果不是通过按钮自带的data属性触发的话）
  const bootstrapModal = new bootstrap.Modal(targetModal);
  bootstrapModal.show();
};

// 监听模态框关闭完成事件，恢复按钮原色
targetModal.addEventListener('hidden.bs.modal', function () {
  // 移除点击后的样式，恢复初始样式
  submitBtn.classList.remove("btn-success");
  submitBtn.classList.add("btn-primary");
});

特殊情况处理（自定义CSS颜色） #

如果你不是用Bootstrap的按钮类，而是直接用CSS修改背景色，那把classList的操作换成修改style.backgroundColor就行：

// 点击时变色
submitBtn.style.backgroundColor = "#28a745";
// 关闭模态框时恢复原色
submitBtn.style.backgroundColor = "#007bff";

为啥之前的代码没生效？ #

你之前的代码只处理了「按钮点击时变色」的逻辑，但完全没关联模态框的关闭动作——模态框关闭时根本没触发任何恢复按钮样式的代码，按钮自然一直保持变色后的状态啦～

内容的提问来源于stack exchange，提问作者Anggi alansori