Typografi til modalvinduer og dialoger

HTML-elementet <dialog> har indbygget modaladfærd: fastholdelse af fokus, lukning med Escape og API'et showModal() / close(). Stil det med CSS i stedet for at bygge et tilpasset modalskelet fra bunden.

Pseudo-elementet ::backdrop styler overlejringen bag en åben <dialog>. Anvend en halvgennemsigtig baggrund: dialog::backdrop { background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }. Du behøver ingen wrapper-div.

Centrér dialoger med CSS: dialog { margin: auto; max-width: min(90vw, 640px); max-height: 90vh; overflow-y: auto; }. Når du bruger margin: auto på en dialog, placeres den midt i visningsområdet uden positionering med JavaScript.

Indstil overflow-y: auto på selve dialogen for at håndtere langt indhold. Indstil overflow: hidden på body, når modalen åbnes, for at forhindre rulning i baggrunden — tilføj og fjern en klasse med JavaScript for at slå dette til og fra.

Animér dialogens indgang med @starting-style (Chrome 117+) for indgangsanimationer, der kun bruger CSS, uden JavaScript. For bredere understøttelse kan du tilføje en open-klasse med JavaScript og bruge transition på transform og opacity: slide-up fra translateY(20px) til translateY(0).

Det er vanskeligt at animere lukningen af en dialog — dialogen skjules straks ved close(). Løsningerne er at bruge popover API'et, som har indbygget understøttelse af lukkeanimationer, eller at opfange lukningen med JavaScript, afspille klassen for udgangsanimationen og derefter kalde close(), når animationen slutter.

Dialoger åbnes over alt andet indhold på siden. Undgå z-index-konflikter ved at bruge dialog-elementets indbyggede stablingskontekst — det gengives i det øverste lag over alle CSS z-index-værdier, uden at dialogen selv behøver en z-index-indstilling.

På mobile enheder kan du lade dialoger glide op fra bunden som et ark: dialog { margin: auto auto 0; width: 100%; border-radius: 16px 16px 0 0; max-height: 90vh; }. På computer centreres de som en traditionel modal ved hjælp af mønsteret med margin: auto.

Det indbyggede dialog-element flytter automatisk fokus til det første element, der kan modtage fokus, når dialogen åbnes. Sørg for en logisk tabulatorrækkefølge i dialogen. Tilføj en lukkeknap, der returnerer fokus til udløseren, når dialogen lukkes, så tastaturnavigationen forbliver sammenhængende.

Tilføj aria-labelledby, som peger på dialogens titel, og aria-describedby, som peger på dialogens beskrivelse. Dialogrollen er implicit for <dialog>. Skærmlæsere annoncerer disse etiketter, når fokus flyttes ind i dialogen.

Bekræftelsesdialoger skal indeholde: en tydelig spørgsmålstitel, en kort beskrivelse af konsekvenserne, en destruktiv handlingsknap (rød og højrejusteret) samt en annulleringsknap (venstrejusteret eller sekundær). Brug autofocus på annulleringsknappen, så det sikre valg er standardhandlingen ved tastaturnavigation.

Det indbyggede dialog-element med ::backdrop, centrering med margin: auto, styring af overflow, CSS-animationer til indgang og fokusstyring giver et fuldt tilgængeligt, CSS-drevet mønster til modaler. Responsivt arklayout på mobile enheder og korrekte ARIA-attributter fuldender en dialogkomponent, der er klar til produktion.