63 lines
1.8 KiB
JavaScript
63 lines
1.8 KiB
JavaScript
import React, { useEffect } from 'react';
|
|
|
|
const Modal = ({ isOpen, onClose, title, children, size = 'md' }) => {
|
|
useEffect(() => {
|
|
const handleEscape = (e) => {
|
|
if (e.key === 'Escape' && isOpen) {
|
|
onClose();
|
|
}
|
|
};
|
|
|
|
if (isOpen) {
|
|
document.addEventListener('keydown', handleEscape);
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
return () => {
|
|
document.removeEventListener('keydown', handleEscape);
|
|
document.body.style.overflow = 'unset';
|
|
};
|
|
}, [isOpen, onClose]);
|
|
|
|
if (!isOpen) return null;
|
|
|
|
const sizeClasses = {
|
|
sm: 'max-w-md',
|
|
md: 'max-w-2xl',
|
|
lg: 'max-w-4xl',
|
|
xl: 'max-w-6xl'
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
|
{/* 遮罩层 */}
|
|
<div
|
|
className="fixed inset-0 bg-gray-900 bg-opacity-75 transition-opacity"
|
|
onClick={onClose}
|
|
/>
|
|
|
|
{/* 弹窗内容 */}
|
|
<div className={`relative bg-white rounded-lg shadow-xl ${sizeClasses[size]} w-full mx-4 max-h-[90vh] flex flex-col`}>
|
|
{/* 头部 */}
|
|
<div className="flex items-center justify-between p-6 border-b border-gray-200">
|
|
<h2 className="text-xl font-semibold text-gray-900">{title}</h2>
|
|
<button
|
|
onClick={onClose}
|
|
className="text-gray-400 hover:text-gray-600 transition-colors"
|
|
>
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{/* 内容区域 */}
|
|
<div className="p-6 overflow-y-auto flex-1">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Modal; |