Modal

Om komponenten

En modal (også kalt popup eller dialog) er et midlertidig vindu som vises over resten av innholdet i en applikasjon eller nettside. Den brukes for å fange brukerens oppmerksomhet når det er behov for en viktig handling, bekreftelse eller informasjon.

Eksempel på modal med de to ulike variantene av styling

Modaler bør brukes med forsiktighet for å unngå å forstyrre brukeropplevelsen unødvendig. De bør alltid ha en tydelig hensikt, og gi brukeren en enkel måte å lukke dem på.

Varianter

Modalen i Punkt har to ulike stylinger. Standard-styling med et forenklet visuelt uttrykk, perfekt for adminflater og lignende, og en litt mer luftig versjon med symbol-lukkeelement som matcher oslo.kommune.no.

Du står fritt til å velge den varianten som matcher din løsning/flate best.

Farger

Modal har alltid hvit bakgrunnsfarge ($-surface-subtle-white, #FFFFFF) og Oslo-blå farge på tekst ($text-body-dark, #2A2859).

Feilmeldinger

Dersom du ønsker å vise en feilmelding eller en kritisk handling i modalen anbefaler vi å legge til en Alert, i stedet for å endre fargen på hele modalen. Denne kan brukes for eksempel om det skjer en feil når man skal prøve å sende inn et skjema.

Slik bruker du komponenten

Når skal modaler brukes? ✅

Bekreftelser: Når en bruker utfører en kritisk handling, for eksempel sletting av data.
Tilleggsinformasjon: Når mer informasjon er nødvendig uten å navigere bort fra hovedinnholdet.
Skjemaer: Når et skjema skal fylles ut uten at brukeren forlater den nåværende siden.

Når bør modaler unngås? ❌

For lange eller komplekse interaksjoner: Hvis brukeren må gjøre mye interaksjon i modalen, bør en egen side vurderes i stedet.
Flere sekvensielle steg: Bruk heller en veiviser eller en stegvis prosess enn å bruke flere modaler etter hverandre.
Informasjon som ikke er kritisk: Hvis innholdet ikke krever umiddelbar oppmerksomhet, kan det vises på en annen måte, for eksempel i en ekspanderbar seksjon.

Retningslinjer for bruk

Husk at modalen skal være navigerbar både med tastatur og skjermlesere. Fokus bør settes på modalen når den åpnes. Brukeren må også få en tydelig måte å lukke modalen på, gjerne via lukknapp i tillegg til muligheten til å trykke Esc.

Unngå påtrengende unødvendige modaler - aldri åpne en modal automatisk uten at brukeren har utført en handling som gjør at hen forventer det.

Når en modal er åpen bør ikke innholdet bak være interaktivt eller kunne scrolles for å unngå forvirring. Modalen må også fungere på alle skjermstørrelser, det er viktig å teste den også på mobil!