Как реализовать модальное окно с формой (логин/пароль) и обработкой внешних кликов (outside click) для закрытия?

Question

Модальное окно реализуется как компонент, который отображается поверх основного контента. Обработка клика вне модалки (outside click) делается через проверку цели события: если клик был не по модалке, то закрываем ее.

YeaHub · Accepted Answer

Структура модального окна:Компонент модалки рендерится в отдельном портале (например, в document.body) для избежания проблем с z-index.Состояние видимости управляется через React-стейт.Обработка outside click:Добавляем обработчик клика на документ при открытии модалки.В обработчике проверяем, был ли клик внутри модалки (используя ref).Если клик был снаружи, закрываем модалку.Пример реализации:const Modal = ({ isOpen, onClose, children }) => { const modalRef = useRef(); useEffect(() => { const handleClickOutside = (event) => { if (modalRef.current && !modalRef.current.contains(event.target)) { onClose(); } }; if (isOpen) { document.addEventListener('mousedown', handleClickOutside); } return () => { document.removeEventListener('mousedown', handleClickOutside); }; }, [isOpen, onClose]); if (!isOpen) return null; return ReactDOM.createPortal(

{children}

, document.body ); };Улучшения:Добавление анимаций появления/исчезновения.Обработка клавиши Escape для закрытия.Блокировка скролла тела страницы при открытой модалке.