357 lines
9.0 KiB
JavaScript
357 lines
9.0 KiB
JavaScript
/**
|
||
* 自定义模态框组件
|
||
* 符合项目UI设计规范，具有平滑过渡动画和响应式显示
|
||
*/
|
||
|
||
class CustomModal {
|
||
constructor(options = {}) {
|
||
this.id = options.id || 'customModal_' + Date.now();
|
||
this.title = options.title || '';
|
||
this.content = options.content || '';
|
||
this.size = options.size || 'medium'; // small, medium, large
|
||
this.showClose = options.showClose !== false;
|
||
this.onClose = options.onClose || null;
|
||
this.onConfirm = options.onConfirm || null;
|
||
this.confirmText = options.confirmText || '确定';
|
||
this.cancelText = options.cancelText || '取消';
|
||
this.showFooter = options.showFooter !== false;
|
||
this.backdrop = options.backdrop !== false;
|
||
this.modal = null;
|
||
}
|
||
|
||
show() {
|
||
// 创建模态框HTML
|
||
const modalHtml = this._createModalHtml();
|
||
|
||
// 移除已存在的模态框
|
||
const existing = document.getElementById(this.id);
|
||
if (existing) {
|
||
existing.remove();
|
||
}
|
||
|
||
// 添加到body
|
||
document.body.insertAdjacentHTML('beforeend', modalHtml);
|
||
this.modal = document.getElementById(this.id);
|
||
this.backdropEl = document.getElementById(this.id + '_backdrop');
|
||
|
||
// 添加显示动画
|
||
requestAnimationFrame(() => {
|
||
this.modal.classList.add('show');
|
||
if (this.backdropEl) {
|
||
this.backdropEl.classList.add('show');
|
||
}
|
||
document.body.style.overflow = 'hidden';
|
||
});
|
||
|
||
// 绑定事件
|
||
this._bindEvents();
|
||
}
|
||
|
||
hide() {
|
||
if (!this.modal) return;
|
||
|
||
this.modal.classList.remove('show');
|
||
if (this.backdropEl) {
|
||
this.backdropEl.classList.remove('show');
|
||
}
|
||
document.body.style.overflow = '';
|
||
|
||
// 动画结束后移除
|
||
setTimeout(() => {
|
||
if (this.modal && this.modal.parentNode) {
|
||
this.modal.remove();
|
||
}
|
||
if (this.backdropEl && this.backdropEl.parentNode) {
|
||
this.backdropEl.remove();
|
||
}
|
||
if (this.onClose) {
|
||
this.onClose();
|
||
}
|
||
}, 300);
|
||
}
|
||
|
||
_createModalHtml() {
|
||
const sizeClass = {
|
||
small: 'modal-sm',
|
||
medium: '',
|
||
large: 'modal-lg'
|
||
}[this.size];
|
||
|
||
const backdropHtml = this.backdrop ?
|
||
`<div class="custom-modal-backdrop" id="${this.id}_backdrop"></div>` : '';
|
||
|
||
return backdropHtml + `
|
||
<div class="custom-modal" id="${this.id}">
|
||
<div class="custom-modal-dialog ${sizeClass}">
|
||
<div class="custom-modal-content">
|
||
${this.title || this.showClose ? `
|
||
<div class="custom-modal-header">
|
||
${this.title ? `<h5 class="custom-modal-title">${this.title}</h5>` : ''}
|
||
${this.showClose ? `<button type="button" class="custom-modal-close" data-dismiss="modal">
|
||
<i class="bi bi-x-lg"></i>
|
||
</button>` : ''}
|
||
</div>
|
||
` : ''}
|
||
<div class="custom-modal-body">
|
||
${this.content}
|
||
</div>
|
||
${this.showFooter ? `
|
||
<div class="custom-modal-footer">
|
||
<button type="button" class="custom-modal-btn custom-modal-btn-cancel" data-dismiss="modal">
|
||
${this.cancelText}
|
||
</button>
|
||
${this.onConfirm ? `
|
||
<button type="button" class="custom-modal-btn custom-modal-btn-confirm">
|
||
${this.confirmText}
|
||
</button>
|
||
` : ''}
|
||
</div>
|
||
` : ''}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
_bindEvents() {
|
||
// 关闭按钮
|
||
const closeBtn = this.modal.querySelector('[data-dismiss="modal"]');
|
||
if (closeBtn) {
|
||
closeBtn.addEventListener('click', () => this.hide());
|
||
}
|
||
|
||
// 确认按钮
|
||
const confirmBtn = this.modal.querySelector('.custom-modal-btn-confirm');
|
||
if (confirmBtn && this.onConfirm) {
|
||
confirmBtn.addEventListener('click', () => {
|
||
if (this.onConfirm() !== false) {
|
||
this.hide();
|
||
}
|
||
});
|
||
}
|
||
|
||
// 点击背景关闭
|
||
if (this.backdropEl) {
|
||
this.backdropEl.addEventListener('click', () => this.hide());
|
||
}
|
||
|
||
// 点击内容区域不关闭
|
||
const content = this.modal.querySelector('.custom-modal-content');
|
||
if (content) {
|
||
content.addEventListener('click', (e) => e.stopPropagation());
|
||
}
|
||
}
|
||
|
||
updateContent(content) {
|
||
const body = this.modal?.querySelector('.custom-modal-body');
|
||
if (body) {
|
||
body.innerHTML = content;
|
||
}
|
||
}
|
||
}
|
||
|
||
// CSS样式（通过JavaScript注入，或单独引入CSS文件）
|
||
const customModalStyles = `
|
||
<style id="custom-modal-styles">
|
||
.custom-modal-backdrop {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
z-index: 1040;
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
backdrop-filter: blur(4px);
|
||
}
|
||
|
||
.custom-modal-backdrop.show {
|
||
opacity: 1;
|
||
}
|
||
|
||
.custom-modal {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 1050;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 16px;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.custom-modal.show {
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.custom-modal-dialog {
|
||
width: 100%;
|
||
max-width: 500px;
|
||
margin: auto;
|
||
transform: scale(0.9) translateY(-20px);
|
||
transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||
}
|
||
|
||
.custom-modal.show .custom-modal-dialog {
|
||
transform: scale(1) translateY(0);
|
||
}
|
||
|
||
.custom-modal-dialog.modal-sm {
|
||
max-width: 400px;
|
||
}
|
||
|
||
.custom-modal-dialog.modal-lg {
|
||
max-width: 800px;
|
||
}
|
||
|
||
.custom-modal-content {
|
||
background: #fff;
|
||
border-radius: 20px;
|
||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||
overflow: hidden;
|
||
max-height: 90vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.custom-modal-header {
|
||
padding: 20px 24px;
|
||
border-bottom: 1px solid #f1f5f9;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.custom-modal-title {
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
color: #0f172a;
|
||
margin: 0;
|
||
}
|
||
|
||
.custom-modal-close {
|
||
background: none;
|
||
border: none;
|
||
font-size: 20px;
|
||
color: #94a3b8;
|
||
cursor: pointer;
|
||
padding: 4px;
|
||
line-height: 1;
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
.custom-modal-close:hover {
|
||
color: #64748b;
|
||
}
|
||
|
||
.custom-modal-body {
|
||
padding: 24px;
|
||
overflow-y: auto;
|
||
flex: 1;
|
||
color: #334155;
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.custom-modal-footer {
|
||
padding: 16px 24px;
|
||
border-top: 1px solid #f1f5f9;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 12px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.custom-modal-btn {
|
||
padding: 10px 24px;
|
||
border-radius: 12px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
border: none;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.custom-modal-btn-cancel {
|
||
background: #f8fafc;
|
||
color: #64748b;
|
||
}
|
||
|
||
.custom-modal-btn-cancel:hover {
|
||
background: #f1f5f9;
|
||
}
|
||
|
||
.custom-modal-btn-confirm {
|
||
background: #0f172a;
|
||
color: #fff;
|
||
}
|
||
|
||
.custom-modal-btn-confirm:hover {
|
||
background: #1e293b;
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.custom-modal-btn-confirm:active {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* 响应式 */
|
||
@media (max-width: 576px) {
|
||
.custom-modal-dialog {
|
||
max-width: 100%;
|
||
margin: 0;
|
||
}
|
||
|
||
.custom-modal {
|
||
padding: 0;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.custom-modal-dialog {
|
||
transform: translateY(100%);
|
||
}
|
||
|
||
.custom-modal.show .custom-modal-dialog {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.custom-modal-content {
|
||
border-radius: 20px 20px 0 0;
|
||
max-height: 80vh;
|
||
}
|
||
}
|
||
</style>
|
||
`;
|
||
|
||
// 注入样式
|
||
if (!document.getElementById('custom-modal-styles')) {
|
||
document.head.insertAdjacentHTML('beforeend', customModalStyles);
|
||
}
|
||
|
||
// 导出到全局
|
||
window.CustomModal = CustomModal;
|
||
|
||
// 便捷方法
|
||
window.showCustomModal = function(options) {
|
||
const modal = new CustomModal(options);
|
||
modal.show();
|
||
return modal;
|
||
};
|
||
|
||
window.showCustomConfirm = function(message, title = '确认操作', onConfirm = null) {
|
||
return new CustomModal({
|
||
title: title,
|
||
content: `<p style="margin: 0;">${message}</p>`,
|
||
onConfirm: onConfirm,
|
||
showFooter: true
|
||
});
|
||
};
|