如何通过单一函数动态调用多个模态框？-html教程-PHP中文网

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

本文介绍一种简洁、可复用的方式，使用一个通用函数替代重复的模态框操作逻辑，支持多按钮触发不同模态框，并统一处理打开、关闭及表单回填逻辑。

本文介绍一种简洁、可复用的方式，使用一个通用函数替代重复的模态框操作逻辑，支持多按钮触发不同模态框，并统一处理打开、关闭及表单回填逻辑。

在实际开发中，若需为多个业务场景（如“选择客户”“选择供应商”）分别弹出独立模态框，为每个场景单独编写几乎相同的 JavaScript 函数（如 setSelectedPelanggan() 和 setSelectedVendor()）会导致代码冗余、难以维护。理想的解决方案是抽象出通用逻辑，通过参数驱动行为，实现「一次定义，多处复用」。

✅ 推荐做法：参数化模态框控制函数

核心思想是将模态框 ID、目标输入框 ID 及关联逻辑解耦，封装为可配置的函数：

吐槽大师

一款以 AI 为核心的趣味文案生成工具，主打根据人物或内容生成轻松幽默的吐槽文本，适合社交媒体互动和娱乐表达。

下载

// 通用模态框操作函数
function openModal(modalId) {
  $(`#${modalId}`).modal('show');
}

function closeModal(modalId) {
  $(`#${modalId}`).modal('hide');
}

// 通用表单回填函数（适用于含 radio 的模态框）
function selectAndFill(targetInputId, radioName = 'optionsRadios') {
  const selectedVal = $(`input[name="${radioName}"]:checked`).val();
  if (selectedVal !== undefined) {
    const labelTxt = $(`label[for="option${selectedVal}"]`).text();
    $(`#${targetInputId}`).val(labelTxt);
  }
}

// 清空 radio 选项（建议在模态框隐藏后调用）
function clearRadioSelection(radioName = 'optionsRadios') {
  $(`input[name="${radioName}"]`).prop('checked', false);
}

? 使用示例（HTML + JS 绑定）

<!-- 触发按钮 —— 通过 data-* 属性传递配置 -->
<button type="button" class="btn btn-primary modal-trigger" data-modal="myModal1" data-target="#selectedPelanggan">
  选择客户
</button>

<button type="button" class="btn btn-primary modal-trigger" data-modal="myModal2" data-target="#selectedVendor">
  选择供应商
</button>

<!-- 模态框1：客户选择 -->
<div class="modal fade" id="myModal1" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="optionsRadios" id="option1" value="1"><label class="form-check-label" for="option1">张三科技</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="optionsRadios" id="option2" value="2"><label class="form-check-label" for="option2">李四商贸</label>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" onclick="selectAndFill('selectedPelanggan'); closeModal('myModal1');">确定</button>
      </div>
    </div>
  </div>
</div>

<!-- 模态框2：供应商选择（结构类似，仅 target 不同） -->
<div class="modal fade" id="myModal2" tabindex="-1">
  <!-- ... 类似内容，但确定按钮调用：selectAndFill('selectedVendor'); closeModal('myModal2'); -->
</div>

? 事件绑定（推荐一次性初始化）

$(document).ready(function() {
  // 点击按钮打开对应模态框
  $('.modal-trigger').on('click', function() {
    const modalId = $(this).data('modal');
    const targetId = $(this).data('target');

    // 可选：清空上次选择
    clearRadioSelection();

    openModal(modalId);

    // 监听模态框隐藏事件，自动清空 radio（增强体验）
    $(`#${modalId}`).on('hidden.bs.modal', function () {
      clearRadioSelection();
    });
  });

  // 支持键盘 ESC 或点击遮罩层关闭时自动清理
  $('.modal').on('hidden.bs.modal', function () {
    clearRadioSelection();
  });
});