Вопрос проверяет умение создавать глобальные UI-компоненты, которые должны отображаться поверх всего интерфейса, что критично для уведомлений, модальных окон или системных алертов.
Создание кастомного алерта, который должен отображаться поверх всех элементов интерфейса, — это распространённая задача в веб-разработке. Основная сложность заключается в том, чтобы компонент не был ограничен стилями (например, overflow: hidden) своего родительского контейнера в DOM-дереве и имел приоритет по оси Z (был поверх других элементов).
<body>. Это решает проблему с CSS-свойствами предков.z-index, например, 9999 или 10000.role="alertdialog", aria-labelledby, aria-modal="true") и управлять фокусом (фокус должен перемещаться внутрь алерта и быть в нём «заперт»).React предоставляет API ReactDOM.createPortal для рендеринга дочерних элементов в узел DOM, существующий вне иерархии родительского компонента.
import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';
const CustomAlert = ({ message, isOpen, onClose }) => {
useEffect(() => {
const handleEscape = (e) => {
if (e.key === 'Escape') onClose();
};
if (isOpen) {
document.addEventListener('keydown', handleEscape);
document.body.style.overflow = 'hidden'; // Блокируем скролл
}
return () => {
document.removeEventListener('keydown', handleEscape);
document.body.style.overflow = 'unlocked';
};
}, [isOpen, onClose]);
if (!isOpen) return null;
return ReactDOM.createPortal(
<>
<div className="alert-overlay" onClick={onClose} />
<div className="alert-container" role="alertdialog" aria-modal="true">
<p>{message}</p>
<button onClick={onClose}>OK</button>
</div>
</>,
document.body
);
};
// Стили (CSS)
// .alert-overlay {
// position: fixed;
// top: 0; left: 0; right: 0; bottom: 0;
// background: rgba(0,0,0,0.5);
// z-index: 9999;
// }
// .alert-container {
// position: fixed;
// top: 50%; left: 50%;
// transform: translate(-50%, -50%);
// background: white;
// padding: 2rem;
// border-radius: 8px;
// z-index: 10000;
// }Такой подход используется не только для алертов, но и для модальных окон, тостов (уведомлений), сайдбаров, диалогов подтверждения действий. В больших приложениях эту логику часто выносят в глобальный контекст или менеджер состояний (например, Redux) для централизованного управления показами уведомлений из любого места кода.
Вывод: Кастомные алерты поверх экранов стоит реализовывать через порталы (или аналоги в других фреймворках) для гарантированного отображения поверх UI. Это обеспечивает изоляцию от стилей родителей, упрощает управление z-index и делает компонент переиспользуемым глобальным элементом интерфейса.
