41 lines
803 B
React
41 lines
803 B
React
|
import { useEffect } from "react";
|
||
|
|
import "./index.css";
|
||
|
|
|
||
|
|
const Modal = ({
|
||
|
|
visible = false,
|
||
|
|
onClose,
|
||
|
|
children,
|
||
|
|
className = "",
|
||
|
|
maskClosable = true,
|
||
|
|
}) => {
|
||
|
|
// 防止背景滚动
|
||
|
|
useEffect(() => {
|
||
|
|
if (visible) {
|
||
|
|
document.body.style.overflow = "hidden";
|
||
|
|
} else {
|
||
|
|
document.body.style.overflow = "auto";
|
||
|
|
}
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
document.body.style.overflow = "auto";
|
||
|
|
};
|
||
|
|
}, [visible]);
|
||
|
|
|
||
|
|
// 点击遮罩层关闭
|
||
|
|
const handleMaskClick = (e) => {
|
||
|
|
if (maskClosable && e.target.classList.contains("modal-mask")) {
|
||
|
|
onClose?.();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
if (!visible) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={`modal-mask ${className}`} onClick={handleMaskClick}>
|
||
|
|
<div className="modal-content">{children}</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Modal;
|