如何通过单一函数动态调用多个模态框 Modal 弹窗

本文介绍一种简洁、可复用的方式，使用一个通用函数替代多个重复的模态框控制函数，通过按钮 name 属性或 data-target 动态绑定对应模态框，提升代码可维护性与扩展性。

本文介绍一种简洁、可复用的方式，使用一个通用函数替代多个重复的模态框控制函数，通过按钮 `name` 属性或 `data-target` 动态绑定对应模态框，提升代码可维护性与扩展性。

在实际开发中，若为每个模态框（如选择客户、选择供应商等）单独编写 setSelectedPelanggan()、setSelectedVendor() 等函数，不仅冗余，还难以维护。Bootstrap 原生已支持基于 data-toggle="modal" 和 data-target 的声明式模态框触发机制，我们只需在此基础上封装统一的行为逻辑，即可实现“一处定义、多处复用”。

✅ 推荐方案：利用 Bootstrap 内置 API + 语义化数据属性

无需重写模态框显示/隐藏逻辑，直接复用 Bootstrap 的 .modal('show') 和 .modal('hide') 方法，并通过 data-target 或 data-modal-id 统一标识目标模态框：

<!-- 按钮统一使用 data-modal-target 指向对应模态框 ID --><button type="button" class="btn btn-primary open-modal" data-modal-target="#modalPelanggan">  选择客户</button><button type="button" class="btn btn-primary open-modal" data-modal-target="#modalVendor">  选择供应商</button><!-- 模态框结构（注意：id 需与 data-modal-target 一致） --><div class="modal fade" id="modalPelanggan" tabindex="-1">  <div class="modal-dialog">    <div class="modal-content">      <div class="modal-header">        <h5 class="modal-title">选择客户</h5>        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>      </div>      <div class="modal-body">        <div class="form-check">          <input class="form-check-input" type="radio" name="pelangganRadio" id="opt1" value="1">          <label class="form-check-label" for="opt1">张三</label>        </div>        <div class="form-check">          <input class="form-check-input" type="radio" name="pelangganRadio" id="opt2" value="2">          <label class="form-check-label" for="opt2">李四</label>        </div>      </div>      <div class="modal-footer">        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>        <button type="button" class="btn btn-primary confirm-modal" data-field="#selectedPelanggan">确定</button>      </div>    </div>  </div></div><div class="modal fade" id="modalVendor" tabindex="-1">  <!-- 类似结构，略 --></div><!-- 目标输入框 --><input type="text" id="selectedPelanggan" placeholder="已选客户"><input type="text" id="selectedVendor" placeholder="已选供应商">

? 核心 JavaScript：单函数统一封装交互逻辑

// ✅ 通用确认函数：根据按钮 data-field 属性，将选中 radio 的 label 文本填入指定 input$(document).on('click', '.confirm-modal', function() {  const $modal = $(this).closest('.modal');  const targetField = $(this).data('field'); // 如 "#selectedPelanggan"  const $radio = $modal.find('input[type="radio"]:checked');  if ($radio.length) {    const optionId = $radio.val();    const labelText = $modal.find(`label[for="${$radio.attr('id')}"]`).text();    $(targetField).val(labelText);  }  // 关闭当前模态框  $modal.modal('hide');});// ✅ 可选：关闭模态框时自动清空 radio 选项（提升 UX）$(document).on('hidden.bs.modal', '.modal', function () {  $(this).find('input[type="radio"]').prop('checked', false);});

⚠️ 注意事项与最佳实践

• 避免硬编码 ID：不要在 JS 中写死 #modalPelanggan，而是通过 data-modal-target 或 data-field 动态获取，便于后期增删模态框；
• 事件委托优先：使用 $(document).on('click', selector, handler) 而非 $('.confirm-modal').on('click', ...)，确保动态插入的模态框仍可响应；
• Bootstrap 版本适配：上述代码基于 Bootstrap 5（使用 data-bs-dismiss 和 hidden.bs.modal），若使用 Bootstrap 4，请将 data-bs-dismiss 改为 data-dismiss，事件名改为 hidden.bs.modal；
• 表单状态隔离：每个模态框内 radio 的 name 属性应唯一（如 pelangganRadio / vendorRadio），防止跨模态框互斥。

通过该方案，你不再需要为每个业务场景复制粘贴整套函数——只需配置 HTML 属性，逻辑复用率高达 100%，同时保持语义清晰、调试友好、易于团队协作。