本文介绍一种简洁、可复用的方式，使用一个通用函数替代多个重复的模态框控制函数，通过按钮 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 统一标识目标模态框：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
<!-- 按钮统一使用 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%，同时保持语义清晰、调试友好、易于团队协作。
