【新增】封装提示模态框
This commit is contained in:
55
src/main/resources/static/assets/js/confirmModal.js
Normal file
55
src/main/resources/static/assets/js/confirmModal.js
Normal 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);
|
||||
Reference in New Issue
Block a user