Portals für Modals und Tooltips
Verwenden Sie ReactDOM.createPortal, um untergeordnete Elemente in einem anderen DOM-Knoten zu rendern und so Modals und Tooltips zu ermöglichen, die overflow:hidden-Container verlassen.
Portals für Modals und Tooltips ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Das Problem mit dem Container
Modals und Tooltips müssen am oberen Ende des DOM gerendert werden, damit sie overflow:hidden, das z-index-Stacking und durch transform erzeugte Kontexte ihres Parents umgehen. Die Lösung sind Portals.
createPortal-API
createPortal(children, container) rendert children in container (einem beliebigen DOM-Knoten), behält sie jedoch logisch als Children der React-Komponente bei, sodass Events und Context weiterhin funktionieren.
import { createPortal } from 'react-dom';
function Modal({ children, onClose }) {
return createPortal(
<div className="modal-backdrop" onClick={onClose}>
<div className="modal-content" onClick={e => e.stopPropagation()}>
{children}
</div>
</div>,
document.body
);
}Portal-Container
Übliche Ziele sind document.body, ein eigenes #modal-root-Div in index.html oder ein bei Bedarf erstellter Container, auf den über eine Ref verwiesen wird.
<!-- index.html -->
<div id="root"></div>
<div id="modal-root"></div>
// component:
const modalRoot = document.getElementById('modal-root');
return createPortal(<div>...</div>, modalRoot);Warum nicht einfach inline rendern?
Wenn ein Parent overflow: hidden besitzt, wird ein darin enthaltenes Modal abgeschnitten. Hat ein Parent transform: scale, bezieht sich die fixe Positionierung des Modals auf den Parent. Portals vermeiden all diese Probleme.
Events werden weiterhin weitergereicht
Obwohl sie an einer anderen Stelle im DOM gerendert werden, laufen React-Events durch den Komponentenbaum und nicht durch den DOM-Baum nach oben. Ein Klick im Portal wird weiterhin an onClick-Handler von übergeordneten React-Komponenten weitergereicht.
Schließen bei Klick auf das Overlay
Unterbinden Sie die Weitergabe des Events am Modal-Inhalt, damit Klicks innerhalb des Modals es nicht schließen.
function Modal({ onClose, children }) {
return createPortal(
<div className="backdrop" onClick={onClose}>
<div className="content" onClick={e => e.stopPropagation()}>
{children}
</div>
</div>,
document.body
);
}Schließen mit der Escape-Taste
Fügen Sie einen keydown-Listener hinzu, solange das Modal geöffnet ist, und entfernen Sie ihn beim Unmounting.
useEffect(() => {
const onKey = (e) => { if (e.key === 'Escape') onClose(); };
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [onClose]);Fokusverwaltung in Portals
Wenn ein Modal geöffnet wird: Verschieben Sie den Fokus in das Modal, halten Sie ihn bis zum Schließen dort gefangen und stellen Sie ihn anschließend auf dem Element wieder her, das das Modal geöffnet hat. Verwenden Sie eine Bibliothek wie focus-trap-react, statt diese Logik selbst zu implementieren.
Das native dialog-Element
Das HTML-Element <dialog> übernimmt die Positionierung des Modals, den Hintergrund, die Fokusfalle und das Schließen mit Escape nativ. Für die meisten Modals ist es ein besserer Ausgangspunkt als ein Portal.
function Modal({ open, onClose, children }) {
const ref = useRef(null);
useEffect(() => {
if (open) ref.current?.showModal();
else ref.current?.close();
}, [open]);
return (
<dialog ref={ref} onClose={onClose}>
{children}
</dialog>
);
}Tooltips und Popovers
Tooltips werden relativ zu einem Ankerelement positioniert. Ein Portal ermöglicht es ihnen, Stacking-Kontexte zu verlassen. Kombinieren Sie es mit floating-ui für Kollisionserkennung, Umklappen und Positionierung.
import { useFloating, autoUpdate } from '@floating-ui/react';
function Tooltip({ children, content }) {
const { refs, floatingStyles } = useFloating({ whileElementsMounted: autoUpdate });
const [open, setOpen] = useState(false);
return (
<>
<button ref={refs.setReference} onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}>
{children}
</button>
{open && createPortal(
<div ref={refs.setFloating} style={floatingStyles}>{content}</div>,
document.body
)}
</>
);
}Hinweis zu SSR
document existiert auf dem Server nicht. Rendern Sie entweder nur auf dem Client (prüfen Sie typeof window) oder verwenden Sie in Next.js dynamic mit ssr:false.
Accessibility: aria-modal
Modal-Container sollten role="dialog", aria-modal="true" und aria-labelledby besitzen, das auf die Überschrift des Modals verweist. Alternativ können Sie <dialog> nativ verwenden.
Kurze Überprüfung
Warum sollten Sie createPortal für Modals verwenden, statt sie inline im Komponentenbaum zu rendern?
Zusammenfassung: Portals
createPortal(children, container) rendert DOM-Inhalte an einer anderen Stelle, behält aber den logischen React-Baum bei. Dadurch werden Probleme mit overflow, transform und z-index umgangen. Events werden weiterhin durch den React-Baum weitergereicht. Fügen Sie das Schließen mit Escape und eine Fokusverwaltung hinzu. Das native <dialog>-Element übernimmt bei Modals einen großen Teil dieser Aufgaben. Kombinieren Sie es für Tooltips mit floating-ui. Vergessen Sie SSR nicht (typeof window prüfen).
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 41
- Lektionen
- 163
Häufig gestellte Fragen
Ist die Lektion „Portals für Modals und Tooltips“ kostenlos?
Ja — der vollständige Text von „Portals für Modals und Tooltips“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Portals für Modals und Tooltips“?
Verwenden Sie ReactDOM.createPortal, um untergeordnete Elemente in einem anderen DOM-Knoten zu rendern und so Modals und Tooltips zu ermöglichen, die overflow:hidden-Container verlassen. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Portals für Modals und Tooltips“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Zusammengesetzte Komponenten mit Context
- Render Props und HOC-Muster
- Portals für Modals und Tooltips
- Error Boundaries