Bootstrap4 模态框隐藏或打开时如何重绘恢复初始加载状态

核心结论 #

Bootstrap 4.x 没有提供专门用于将模态框一键重置为初始加载状态的内置API，你可以通过以下两种更简便的方案替代手动逐个恢复元素属性的繁琐操作：

方案1：基于原始DOM备份的全量重置 #

适用于模态框内容改动较大（如自定义修改元素类名、增删提示节点）的场景，可100%还原初始状态：

• 页面初始化时先缓存模态框的原始HTML结构
• 监听hidden.bs.modal事件，每次模态框完全关闭后用备份的原始内容替换当前内容

// 页面加载完成后备份模态框原始内容
const originalModalContent = $('#yourModalID').html();

// 模态框隐藏后重置内容
$('#yourModalID').on('hidden.bs.modal', function () {
  $(this).html(originalModalContent);
});

注意：如果模态框内部元素绑定了独立事件监听器，还原HTML后需要重新绑定事件，也可以提前使用事件委托的方式绑定内部元素事件，避免重置后事件失效

方案2：表单场景轻量重置 #

如果模态框内仅存在表单状态、验证样式改动，没有额外的DOM结构变更，可以用更轻量的方式处理：

$('#yourModalID').on('hidden.bs.modal', function () {
  // 重置表单所有输入值到初始状态
  const form = $(this).find('form')[0];
  form && form.reset();
  
  // 清除所有验证相关样式和提示
  $(this).find('.is-invalid, .is-valid').removeClass('is-invalid is-valid');
  $(this).find('.invalid-feedback, .valid-feedback').hide();
  
  // 统一恢复输入框的form-control类
  $(this).find('input, select, textarea').addClass('form-control');
});

内容的提问来源于stack exchange，提问作者Stack Undefined