83 lines
2.1 KiB
JavaScript
83 lines
2.1 KiB
JavaScript
|
// 弹窗组件
|
||
|
|
|
||
|
|
const Modal = {
|
||
|
|
// 显示弹窗
|
||
|
|
show(modalId) {
|
||
|
|
const modal = document.getElementById(modalId);
|
||
|
|
if (modal) {
|
||
|
|
modal.style.display = 'block';
|
||
|
|
document.body.style.overflow = 'hidden';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// 隐藏弹窗
|
||
|
|
hide(modalId) {
|
||
|
|
const modal = document.getElementById(modalId);
|
||
|
|
if (modal) {
|
||
|
|
modal.style.display = 'none';
|
||
|
|
document.body.style.overflow = '';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// 切换弹窗
|
||
|
|
toggle(modalId) {
|
||
|
|
const modal = document.getElementById(modalId);
|
||
|
|
if (modal) {
|
||
|
|
if (modal.style.display === 'none') {
|
||
|
|
this.show(modalId);
|
||
|
|
} else {
|
||
|
|
this.hide(modalId);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// 显示确认对话框
|
||
|
|
confirm(message) {
|
||
|
|
return confirm(message);
|
||
|
|
},
|
||
|
|
|
||
|
|
// 显示加载状态
|
||
|
|
showLoading(modalId) {
|
||
|
|
const modal = document.getElementById(modalId);
|
||
|
|
if (modal) {
|
||
|
|
const footer = modal.querySelector('.modal-footer');
|
||
|
|
if (footer) {
|
||
|
|
footer.dataset.originalContent = footer.innerHTML;
|
||
|
|
footer.innerHTML = '<span class="loading-text">加载中...</span>';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// 隐藏加载状态
|
||
|
|
hideLoading(modalId) {
|
||
|
|
const modal = document.getElementById(modalId);
|
||
|
|
if (modal) {
|
||
|
|
const footer = modal.querySelector('.modal-footer');
|
||
|
|
if (footer && footer.dataset.originalContent) {
|
||
|
|
footer.innerHTML = footer.dataset.originalContent;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// Bootstrap 模态框包装
|
||
|
|
const BootstrapModal = {
|
||
|
|
init(modalId) {
|
||
|
|
return new bootstrap.Modal(document.getElementById(modalId));
|
||
|
|
},
|
||
|
|
|
||
|
|
show(modalId) {
|
||
|
|
const modal = bootstrap.Modal.getOrCreateInstance(document.getElementById(modalId));
|
||
|
|
modal.show();
|
||
|
|
},
|
||
|
|
|
||
|
|
hide(modalId) {
|
||
|
|
const modal = bootstrap.Modal.getOrCreateInstance(document.getElementById(modalId));
|
||
|
|
modal.hide();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// 导出
|
||
|
|
window.Modal = Modal;
|
||
|
|
window.BootstrapModal = BootstrapModal;
|