Modalvindu brukes for å vise informasjon, bruksspesifikke funksjoner, meldinger eller bekreftelser som brukeren må respondere på før de kan fortsette å bruke nettsiden.
Modalvinduer skal IKKE brukes i mobilapplikasjoner. I app anbefales det å bruke eksternt lag eller sheet der det anses som nødvendig.
Modalvinduer skal kun aktiveres av bruker ved brukers direkte interaksjon med en knapp på nettsiden, eller for å gi brukeren viktige informasjonsvarsler. Modalen vil da gi brukeren et nytt grensesnitt, men under samme kontekst som siden bruker var på ved aktivering.
En modal skal alltid ha en heading nivå 2. Ikke bruk modalvinduer for funksjonelle prosesser med flere steg.
For å lukke eller åpne en modal brukes ModalHandle. Innhold kan plasseres i en eller flere <ModalBlock/>.
Modaler benyttes når vi ønsker å beholde brukerens navigasjonskontekst og bør aller helst bare benyttes i to hovedsituasjoner;
Ikke bruk modalvinduer for funksjonelle prosesser med flere steg.
Modaler skal alltid ha flere lukkefunksjoner. Klikk utenfor modalen skal behandles likt som klikk på ‘lukk’ (kryss eller knapp). Ettersom modaler lett kan lukkes bør de ikke inneholde for mange funksjoner eller kritisk innhold. I slike tilfeller bør en egen side vurderes. Funksjonelle prosesser over flere steg må aldri legges i en modal.
Modaler med informasjon skal brukes på samme måte som tooltip eller pop-over, men i større format og med plass til mer tekst. Teksten er oftest midtstilt, men kan også være venstrestilt i større modaler med mye tekst. Informasjonsmodaler kan inneholde flere steg, men bør da ha knapper både for ‘Neste’ og for ‘Avbryt’.
Modaler med funksjon må benyttes kun hvis det anses som nødvendig, og bare til enkle funksjoner som f.eks. innlogging, modusvalg, filter eller dato/tidsvelger. Komplekse skjemaer med flere ulike typer input bør heller vises på egen side. Knappene skal plasseres midtstilt i mindre modaler, og høyrestilt i større modaler. Knappen lengst til høyre skal være primærknappen som aktiverer funksjonen (f.eks. «ok» eller «send inn).
Modalvinduer som benyttes for å kontrollere eller varsle om handlinger/endringer. Eksempler på dette vil være:
For å opprettholde dokumentstruktur med tanke på overskriftshierarki må modalvinduet benytte <h2> som overskriftsnivå for sin hovedoverskrift.
Ikke tillat tastaturnavigasjon utenfor eller «bak» modalvinduet. Så lenge modalen er aktivert vil tastaturnavigasjon måtte begrenses til selve modalen.