Bootstrap 4 Modal技术问询：多按钮触发同模态框，表单需差异化

这个场景我太熟悉了！之前做项目的时候正好遇到过类似需求，利用Bootstrap模态框的内置事件就能完美解决，具体步骤如下：

1. 给按钮添加唯一标识 #

首先要给每个触发按钮加上一个自定义的data-*属性，用来区分不同按钮对应的表单，比如data-form-id：

<!-- 按钮1 -->
<div class="card" data-toggle="modal" data-target="#target-modal" data-form-id="1">
  Button -1 
  <p class="status" style="display: none;"><i class="fa fa-check" aria-hidden="true"></i></p>
</div>

<!-- 按钮2 -->
<div class="card" data-toggle="modal" data-target="#target-modal" data-form-id="2">
  Button -2 
  <p class="status" style="display: none;"><i class="fa fa-check" aria-hidden="true"></i></p>
</div>

<!-- 按钮3、4以此类推，data-form-id分别设为3、4 -->

2. 调整模态框结构 #

在模态框里预留一个容器，专门用来加载动态表单内容，这样我们可以随时替换里面的HTML：

<div class="modal fade" id="target-modal" tabindex="-1" role="dialog" aria-labelledby="modal-title" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modal-title">动态表单</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- 动态表单容器 -->
        <div id="dynamic-form-container"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <!-- 提交按钮要关联动态生成的表单ID -->
        <button type="submit" class="btn btn-primary" form="dynamic-form">提交</button>
      </div>
    </div>
  </div>
</div>

3. 监听模态框事件加载表单 #

Bootstrap模态框提供了show.bs.modal事件，这个事件会在模态框显示之前触发，正好用来加载对应按钮的表单内容。我们可以通过这个事件拿到触发按钮，再请求后端获取对应表单：

// 可选：缓存已加载的表单，避免重复请求
const formCache = {};

// 监听模态框显示前的事件
$('#target-modal').on('show.bs.modal', function(event) {
  // 获取触发模态框的按钮元素
  const triggerBtn = $(event.relatedTarget);
  // 拿到按钮对应的表单ID
  const formId = triggerBtn.data('form-id');

  if (formCache[formId]) {
    // 如果有缓存，直接用缓存的内容
    $('#dynamic-form-container').html(formCache[formId]);
    return;
  }

  // 没有缓存的话，请求后端获取表单HTML
  $.ajax({
    url: '/your-backend-api', // 替换成你的后端接口地址
    method: 'GET',
    data: { form_id: formId }, // 把表单ID传给后端，让后端返回对应表单
    success: function(response) {
      // 缓存表单内容，下次直接用
      formCache[formId] = response;
      // 把后端返回的表单HTML插入到容器中
      $('#dynamic-form-container').html(response);
    },
    error: function() {
      // 请求失败时显示错误提示
      $('#dynamic-form-container').html('<p class="text-danger">表单加载失败，请稍后重试</p>');
    }
  });
});

4. 后端处理逻辑 #

后端需要接收form_id参数，根据这个参数生成对应的表单HTML返回。比如：

• 当form_id=1时，返回包含2个输入框的表单
• 当form_id=2时，返回包含1个输入框+1个下拉选择器的表单
• 以此类推，根据你的业务需求生成不同的表单结构

额外注意点 #

• 确保后端返回的表单要有统一的id="dynamic-form"，这样模态框底部的提交按钮才能正确关联表单
• 如果表单需要提交处理，后端也要根据form_id来处理不同的表单数据
• 如果不需要缓存，可以去掉formCache相关的代码，每次都请求最新的表单内容

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