本文介绍一种简洁、可复用的方式，使用一个通用函数替代重复的模态框操作逻辑，支持多按钮触发不同模态框，并统一处理打开、关闭及表单回填逻辑。
本文介绍一种简洁、可复用的方式，使用一个通用函数替代重复的模态框操作逻辑，支持多按钮触发不同模态框，并统一处理打开、关闭及表单回填逻辑。
在实际开发中，若需为多个业务场景（如“选择客户”“选择供应商”）分别弹出独立模态框，为每个场景单独编写几乎相同的 JavaScript 函数（如 setSelectedPelanggan() 和 setSelectedVendor()）会导致代码冗余、难以维护。理想的解决方案是抽象出通用逻辑，通过参数驱动行为，实现「一次定义，多处复用」。
✅ 推荐做法：参数化模态框控制函数
核心思想是将模态框 ID、目标输入框 ID 及关联逻辑解耦，封装为可配置的函数：
// 通用模态框操作函数
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();
});
});⚠️ 注意事项
- Bootstrap 4/5 中 .modal('show') / .modal('hide') 是标准 API，确保已正确引入 Bootstrap JS；
- data-* 属性是传递配置的推荐方式，比依赖 name 或类名更语义化、易维护；
- 表单回填逻辑（selectAndFill）应与模态框内 radio 结构保持一致（如 for="optionX" 与 id="optionX" 匹配）；
- 若模态框需异步加载内容（如远程数据），可在 openModal() 内扩展 AJAX 逻辑，保持主函数纯净。
通过以上方式，你只需维护一套核心函数，即可灵活支撑任意数量的模态框交互，大幅提升代码可读性与可扩展性。
