Wir schauen uns in diesem Tutorial an, wie man mit sehr wenig JavaScript ein PopUp mit abgedunkeltem und gesperrtem Hintergrund ohne Frameworks wie z.b. Bootstrap hinbekommt.
Ausgangssituation und Ziel des Tutorials
Das Tutorial beginnt mit einer einfachen Website, mit etwas Text, einem Button "Login" und einem einfachen Login-Formular.
index.html
style.css
In der main.js befindet sich bis jetzt nur eine leere Funktion, die durch den Login-Button aufgerufen wird.
Das Ziel des Tutorials ist, dass das Formular auf Knopfdruck als animiertes Popup von oben rein fährt. Gleichzeitig soll der Hintergrund gesperrt und abgedunkelt werden.
Dialog-Tag hinzufügen und CSS-Style anpassen
Früher war das eine recht aufwendige Sache, so ein animiertes Pop mit gesperrtem Hintergrund umzusetzen. Deshalb wurden dazu häufig Frameworks, wie Bootstrap eingesetzt. Dank dem 2022 in HTML eingeführten Dialog-Tag ist das aber keine große Sache mehr.
Zunächst wird das Form-Tag in der index.html in ein Dialog-Tag eingeschlossen:
Es folgt ein Zusatz in style.css, um das neue Dialog Element zu stylen. Das Popup wird durch margin 1rem von oben und mittig ausgerichtet. Hintergrund und Rand werden entfernt, wodurch nur der Style des Formulars sichtbar ist.
Beim Neustart der Seite hast Du sicher schon festgestellt, dass das Popup mit dem Formular nun ausgeblendet ist. Der standardmäßige Rand des Dialog-Elements wird deaktiviert.
Dialog mit JavaScript als Modal öffnen
In der bisherigen Methode "showLogin" benötigen wir nur eine Zeile JavvaScript, um das Popup einzublenden. Der Hintergrund ist schon jetzt gesperrt und ein wenig abgedunkelt. Im Beispiel wird der Tagname zur Suche nach dem Element genutzt (also dialog), gäbe es mehrere Popups müsste man natürlich jeweils eine id verwenden.
main.js
Dialog-Tag animieren und Hintergrund beim Öffnen stylen
Jetzt fehlt noch die Slide Animation von oben. Dafür brauchen wir eine CSS-Keyframes-Animation. In der Regel @keyframes wird die Animation beschrieben und durch die Eigenschaft "animation" eingebunden. Die Animation fährt das Popup von außerhalb des Viewports ein, so dass es 1rem von oben anhält. Hier könnte auch noch ein Animationsverhalten wie z.b. ease usw. verwendet werden.
Der letzte Schritt wäre noch die Formatierung des Hintergrunds, wenn das Popup angezeigt wird. Dies geschieht über das Pseudoelement ::backdrop. In unserem Fall wird ein transparentes Schwarz definiert, es wäre auch jede andere Formatierung möglich für das Pseudoelement, auch ein Farbverlauf oder ein Hintergrundbild.
Fazit
In der Modernen Webentwicklung ist, zumindest um animierte Popups zu verwenden, kein Bootstrap oder ein ähnliches Framework nötig. Mit ein bisschen CSS und sehr wenig JavaScript ist das auch so ganz einfach.