Stijlen voor modals en dialogen

Het HTML-element <dialog> biedt ingebouwd modaal gedrag: focus vasthouden, sluiten met Escape en de API showModal() / close(). Maak het op met CSS in plaats van helemaal vanaf nul een aangepaste modale basisstructuur te bouwen.

Het pseudo-element ::backdrop bepaalt de stijl van de laag achter een geopend <dialog>. Pas een halftransparante achtergrond toe: dialog::backdrop { background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }. Je hebt geen omhullende div nodig.

Centreer dialogen met CSS: dialog { margin: auto; max-width: min(90vw, 640px); max-height: 90vh; overflow-y: auto; }. Een dialoog positioneren met margin: auto centreert deze in het weergavegebied zonder positionering met JavaScript.

Stel overflow-y: auto in op de dialoog zelf om lange inhoud af te handelen. Stel overflow: hidden in op body wanneer het modale venster wordt geopend om scrollen op de achtergrond te voorkomen — voeg met JavaScript een klasse toe en verwijder die weer om dit in en uit te schakelen.

Animeer het openen van een dialoog met @starting-style (Chrome 117+) voor animaties die alleen CSS gebruiken, zonder JavaScript. Voeg voor bredere ondersteuning met JavaScript een open-klasse toe en gebruik transition op transform en opacity: slide-up van translateY(20px) naar translateY(0).

Het animeren van het sluiten van een dialoog is lastig — de dialoog wordt onmiddellijk verborgen bij close(). Oplossingen: gebruik de popover-API, die sluitanimaties van nature ondersteunt, of onderschep het sluiten met JavaScript, speel de klasse voor de uitgaande animatie af en roep close() aan nadat de animatie is afgelopen.

Dialogen worden boven alle andere pagina-inhoud geopend. Voorkom z-index-strijd door de ingebouwde stapelcontext van het dialog-element te gebruiken: het wordt in de bovenste laag weergegeven, boven alle CSS-z-indexwaarden, zonder dat het dialog-element zelf een z-index-instelling nodig heeft.

Laat dialogen op mobiel als een paneel van onderaf omhoogschuiven: dialog { margin: auto auto 0; width: 100%; border-radius: 16px 16px 0 0; max-height: 90vh; }. Centreer ze op desktop als een traditioneel modaal venster met het patroon margin: auto.

Het ingebouwde dialog-element verplaatst bij het openen automatisch de focus naar het eerste focusbare element binnen de dialoog. Zorg voor een logische tabvolgorde binnen de dialoog. Voeg een sluitknop toe die de focus bij het sluiten van de dialoog terugbrengt naar het triggerelement, zodat de toetsenbordnavigatie logisch blijft verlopen.

Voeg aria-labelledby toe met een verwijzing naar de dialogtitel en aria-describedby met een verwijzing naar de dialogbeschrijving. De dialoogrol is voor <dialog> impliciet. Schermlezers kondigen deze labels aan wanneer de focus de dialoog binnenkomt.

Bevestigingsdialogen hebben het volgende nodig: een duidelijke vraag als titel, een korte beschrijving van de gevolgen, een knop voor de destructieve actie (rood, rechts uitgelijnd) en een annuleerknop (links uitgelijnd of secundair). Gebruik autofocus op de annuleerknop, zodat de veilige keuze de standaardinteractie met het toetsenbord is.

Het ingebouwde dialog-element met ::backdrop, centrering met margin: auto, beheer van overflow, CSS-animaties voor het openen en focusbeheer biedt een volledig toegankelijk, door CSS aangestuurd patroon voor modale vensters. Responsieve paneelindelingen op mobiel en correcte ARIA-attributen maken een dialoogcomponent die klaar is voor productie compleet.