如何复用单个Bootstrap Modal，根据校验条件动态替换标题与内容？

完全没问题，这种方式不仅能减少冗余代码，还能让你的页面结构更简洁，同时保持统一的弹窗样式。下面是具体的实现方案，我会用Bootstrap 5为例（Bootstrap 4的实现逻辑类似，只是Modal的调用方式稍有不同）：

第一步：编写基础HTML结构 #

先创建一个表单和一个通用的Bootstrap Modal，我们给Modal的标题和内容区域设置id，方便后续用JS动态修改：

<!-- 授权编号表单 -->
<form id="authForm">
  <div class="mb-3">
    <label for="authNumber" class="form-label">授权编号</label>
    <input type="text" class="form-control" id="authNumber" placeholder="请输入授权编号">
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

<!-- 通用提示Modal -->
<div class="modal fade" id="alertModal" tabindex="-1" aria-labelledby="modalTitle" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalTitle">提示</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" id="modalContent">
        <!-- 动态内容会在这里插入 -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">确定</button>
      </div>
    </div>
  </div>
</div>

第二步：编写校验逻辑和Modal动态修改代码 #

通过JavaScript监听表单提交事件，根据不同的校验结果修改Modal的标题和内容，再触发显示：

// 获取DOM元素
const authForm = document.getElementById('authForm');
const authNumberInput = document.getElementById('authNumber');
const modalTitle = document.getElementById('modalTitle');
const modalContent = document.getElementById('modalContent');
const alertModal = new bootstrap.Modal(document.getElementById('alertModal'));

// 监听表单提交
authForm.addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止表单默认提交行为
  const authNumber = authNumberInput.value.trim();

  // 校验1：未输入或仅输入空格
  if (!authNumber) {
    modalTitle.textContent = '输入提示';
    modalContent.textContent = '请输入授权编号';
    alertModal.show();
    return;
  }

  // 校验2：授权编号无效（这里模拟无效判断，实际替换成你的校验逻辑）
  const isAuthValid = checkAuthNumber(authNumber); // 假设这是你的校验函数
  if (!isAuthValid) {
    modalTitle.textContent = '错误提示';
    modalContent.textContent = '无效授权编号';
    alertModal.show();
    return;
  }

  // 如果校验通过，执行后续提交逻辑
  alert('授权编号有效，正在提交...');
  // authForm.submit(); // 这里可以放开实际提交
});

// 模拟授权编号校验函数（根据你的实际需求替换）
function checkAuthNumber(number) {
  // 示例：假设编号必须是6位数字
  return /^\d{6}$/.test(number);
}

针对Bootstrap 4的小调整 #

如果你用的是Bootstrap 4，Modal的初始化和调用方式略有不同，把JS里的Modal相关代码改成这样即可：

// Bootstrap 4 方式
const alertModal = $('#alertModal');

// 显示Modal时用
alertModal.modal('show');

这种方案的好处很明显：

• 只需要维护一个Modal组件，减少重复代码
• 所有提示弹窗样式统一，用户体验更一致
• 后续要新增其他提示场景，只需要添加对应的校验分支和内容修改逻辑即可

内容的提问来源于stack exchange，提问作者Roberto Flores