【新增】封装提示模态框

This commit is contained in:
2025-11-03 10:39:36 +08:00
parent 74034ed26a
commit 3fe027661b

View File

@@ -0,0 +1,55 @@
// assets/js/confirmModal.js
(function(window) {
// 全局确认弹窗函数
window.showConfirmModal = function(options = {}) {
// 默认配置
const {
title = '系统提示',
content = '确定执行此操作吗?',
onConfirm = () => {}, // 确认回调
onCancel = () => {} // 取消回调(可选)
} = options;
// 生成唯一ID避免重复
const modalId = `confirm-modal-${Date.now()}`;
// 动态创建模态框DOM
const modalHtml = `
<div class="modal fade" id="${modalId}" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5">${title}</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">${content}</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="${modalId}-confirm">确认</button>
</div>
</div>
</div>
</div>
`;
// 插入到页面
document.body.insertAdjacentHTML('beforeend', modalHtml);
// 初始化并显示弹窗
const modal = new bootstrap.Modal(document.getElementById(modalId));
modal.show();
// 绑定确认按钮事件
document.getElementById(`${modalId}-confirm`).addEventListener('click', () => {
onConfirm(); // 执行确认逻辑
modal.hide();
});
// 弹窗关闭后清理DOM
const modalElement = document.getElementById(modalId);
modalElement.addEventListener('hidden.bs.modal', () => {
onCancel(); // 执行取消逻辑(可选)
modalElement.remove(); // 移除DOM避免冗余
});
};
})(window);