MODAL / NATIVE DIALOG ELEMENT

XXX

Modals with the native HTML-Element <dialog>

Video von Kevin Powell

APG Dialog (Modal) Pattern

Transistion from and to display: none KP on YouTube

1. Was muss logisch passieren?
2. Welches CSS brauche ich?
3. Wie schreibe ich das JS, Schritt für Schritt, damit die Komponente funktioniert?

Das native <dialog>-Element hat eingebaute Funktionen.

• Es wird standardmäßig versteckt, kein toggeln per JavaScript nötig
• Es beinhaltet die Methoden show() bzw. showModal()
• sowie die Methode close()

show(): zeigt das Modal an (an der ursprünglichen Position im HTML-Dokument), aber der Rest der Seite bleibt davon unberührt. Das ist quasi ein Dialog-Element ohne Modal-Funktion!

showModal(): zeigt das Modal an, allerdings als Overlay/Modal (wie die Methode showModal() ja sagt)(Browserstile anschauen!)

close() schließt das Modal, allerdings kann es auch ohne diese Funktion/Methode mit der esc-Taste out of the box geschlossen werden!

Modal mit Formular: <form method="dialog"> schießt nach Klick auf den Submit-Button!

Schließen bei Klick outside!