如何创建调用模态弹窗的函数？优化重复函数的简洁方案

问题描述 #

我希望创建多个按钮以调用不同的模态弹窗（Modal Popup）函数，但目前只能通过复制代码的方式创建函数。请问是否有更简洁的实现方式？

当前代码实现如下：

JavaScript 代码 #

function setSelectedPelanggan() {
  // 将选中选项的文本设置到输入框
  var selectedOption = $('input[name=optionsRadios]:checked').val();
  var optionText = $('label[for=option' + selectedOption + ']').text();
  $('#selectedPelanggan').val(optionText);

  // 关闭弹窗
  $('.modal').modal('hide');
}

function setSelectedVendor() {
  // 将选中选项的文本设置到输入框
  var selectedOption = $('input[name=optionsRadios]:checked').val();
  var optionText = $('label[for=option' + selectedOption + ']').text();
  $('#selectedVendor').val(optionText);

  // 关闭弹窗
  $('.modal').modal('hide');


  function clearSelection() {
    // 弹窗关闭时清除单选按钮的选中状态
    $('input[name=optionsRadios]').prop('checked', false);
  }
}

HTML 代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1">Show Modal 1</button>

<!-- 触发模态框2的按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">Show Modal 2</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

解决方案 #

可以通过通用函数结合自定义data属性实现，彻底避免重复代码，核心思路是将每个弹窗的关联信息（如目标输入框ID）通过HTML的data属性传递，用一个函数处理所有弹窗的选择逻辑。

1. 修改HTML结构，添加自定义属性 #

给触发按钮添加data-target-input指定选中内容要填充的输入框ID，同时给每个弹窗内的单选按钮组设置独立的name（避免跨弹窗选中状态冲突）：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<!-- 客户选择弹窗 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1" data-target-input="selectedPelanggan">选择客户</button>
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="optionsRadios-pelanggan" id="option1-pelanggan" value="1">
          <label class="form-check-label" for="option1-pelanggan">客户1</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="optionsRadios-pelanggan" id="option2-pelanggan" value="2">
          <label class="form-check-label" for="option2-pelanggan">客户2</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" data-confirm-selection>确认选择</button>
      </div>
    </div>
  </div>
</div>

<!-- 供应商选择弹窗 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2" data-target-input="selectedVendor">选择供应商</button>
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="optionsRadios-vendor" id="option1-vendor" value="1">
          <label class="form-check-label" for="option1-vendor">供应商1</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="optionsRadios-vendor" id="option2-vendor" value="2">
          <label class="form-check-label" for="option2-vendor">供应商2</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" data-confirm-selection>确认选择</button>
      </div>
    </div>
  </div>
</div>

<!-- 目标输入框 -->
<input type="text" id="selectedPelanggan" placeholder="已选客户">
<input type="text" id="selectedVendor" placeholder="已选供应商">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

2. 编写通用JavaScript函数 #

仅需一个函数处理所有弹窗的选择逻辑，同时利用Bootstrap模态框的内置事件处理单选按钮清除：

// 通用确认选择函数
$(document).on('click', '[data-confirm-selection]', function() {
  const $modal = $(this).closest('.modal');
  const targetInputId = $modal.data('target-input');
  const $selectedRadio = $modal.find('input[type=radio]:checked');

  if ($selectedRadio.length) {
    const optionText = $selectedRadio.next('label').text();
    $('#' + targetInputId).val(optionText);
  }

  $modal.modal('hide');
});

// 弹窗关闭时自动清除当前弹窗内的单选按钮选中状态
$(document).on('hidden.bs.modal', '.modal', function() {
  $(this).find('input[type=radio]').prop('checked', false);
});

// 弹窗打开时，将触发按钮的目标输入框ID绑定到弹窗元素
$(document).on('show.bs.modal', '.modal', function(e) {
  const $triggerBtn = $(e.relatedTarget);
  $(this).data('target-input', $triggerBtn.data('target-input'));
});

优化亮点 #

• 无重复代码：新增弹窗仅需修改HTML添加对应data属性，无需编写新函数
• 避免冲突：每个弹窗的单选按钮组使用独立name，防止跨弹窗选中状态干扰
• 自动清理：利用Bootstrap模态框的hidden.bs.modal事件，关闭时自动清空当前弹窗的单选按钮选中状态
• 高扩展性：后续新增任意类型的选择弹窗，只需在触发按钮上指定data-target-input即可

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