Modal-Generator (Pop-up-Fenster) mit dialog

Modal-Generator (Pop-up-Fenster) mit dialog: wofür es gut ist

Modalfenster dienen dazu, eine Aktion zu bestätigen, ein kurzes Formular zu zeigen oder einen Aufruf hervorzuheben, ohne die Person von der Seite zu holen. Von Hand mit div gebaut, scheitern sie oft an Tastatur und Screenreader.

Dieser Generator nutzt das dialog-Element mit showModal(), seit 2022 von allen aktuellen Browsern unterstützt: Der Browser setzt das Fenster darüber, macht den Rest der Seite inert, hält den Fokus, schließt mit Esc und gibt den Fokus an den Button zurück. Der Code fügt den Stil, den Klick außerhalb zum Schließen und einen sanften Eingang mit @starting-style hinzu, der beachtet, wer weniger Bewegung bevorzugt.

So geht’s

1. Schreibe Titel, Text und Buttons.
2. Wähle Farbe, Breite und Ecken.
3. Teste in der Vorschau und kopiere den Code.

Wann nutzen

• Aufruf zum Termin per WhatsApp.
• Bestätigung vor einer Aktion.
• Hinweis auf Neuigkeiten oder kurzes Formular.

Häufige Fragen

Warum das dialog-Element nutzen?

Mit showModal() setzt der Browser das Fenster über alles, macht den Rest der Seite inert, hält den Fokus darin, schließt mit Esc und gibt den Fokus an den Button zurück, der es geöffnet hat. Früher brauchte das viel JavaScript und hatte fast immer Lücken bei der Barrierefreiheit.

Funktioniert es in allen Browsern?

Ja, dialog wird seit 2022 von Chrome, Edge, Firefox und Safari unterstützt.

Kann ich das Modal von selbst beim Betreten der Website öffnen?

Man kann, aber Pop-ups, die ohne Aufforderung aufgehen, nerven meist, und am Handy kann Google Seiten mit aufdringlichen Anzeigen, die den Inhalt verdecken, abwerten. Öffne es lieber über einen Button.

Ist das wirklich kostenlos?

Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.

Ähnliche Tools