MODAL
Ein Modal ist ein Overlay mit einem Inhaltsbereich, das sich auf Klick/Tastatur-Enter öffnet. Die gerade aktive Seite wird dabei (meistens) gedimmt, d.h., die darunterliegenden Inhalte sind sichtbar, aber nicht bedienbar.
Was ist zu tun?
Das HTML-Element der Wahl ist eigentlich das <dialog>-Element (siehe a11-playground). Das Beispiel im Kurs wird aber noch mit einem <div> gemacht, daher bleibt das hier als Anschauungsbeispiel stehen.
Hintergrund scrollt – Overlay verdeckt den Hintergrund nicht voll, bei Dialog-Element nachschauen! - gelöst mit position: fixed;
Z-Index muss auch noch in die Transition rein!
- Was muss logisch passieren?
- Welches CSS brauche ich?
- Wie schreibe ich das JS, Schritt für Schritt, damit die Komponente funktioniert?
Was muss logisch passieren?
Ein zuvor verstecktes <div> mit Inhalt muss auf Mausklick/Tastatur-Enter ein- und wieder ausgeblendet werden. Die Seite darunter soll sichtbar, aber nicht bedienbar sein. Das Modal liegt zuerst unter dem Hauptinhalt. Wenn es geöffnet wird, wird es sichtbar und liegt über dem Hauptinhalt. Der Benutzer kann mit dem Modal interagieren.
Schließen des Modals:
- Klick auf Button
- Klick außerhalb des Modals
- Escape-Taste
Welches CSS brauche ich?
- ein
<div>mit einem Overlay, zuständig für die transparente Überlagerung - das Overlay wird mit
opacitysichtbar bzw. unsichtbar gemacht - Der
z-indexsorgt dafür, dass es auch wirklich obenauf liegt - ein
<div>im Overlay mit dem Inhalt, das eigentliche Modal
Welches JavaScript brauche ich?
- ein Button zum Öffnen des Modals - wenn Button geklickt wird, erhält
<body>die Klasse.is-open - ein Button zum Schließen des Modals -
.is-openwird wieder gelöscht - Das Modal muss auch mit der Esc-Taste geschlossen werden können
- Das Modal muss sich auch schließen, wenn man in den Bereich außerhalb des Modals klickt => wie findet man das raus?