Modal-komponenten i Bootstrap er et nyttig verktøy for å vise interaktivt innhold som innloggingsskjemaer, bildegallerier eller varsler. Modaler er i hovedsak dialogbokser som vises over hovedinnholdet og krever brukerinteraksjon for å lukkes. De kan aktiveres ved ulike hendelser som knappetrykk, lenker eller JavaScript-funksjoner.

Nøkkelfunksjoner

Bootstrap-modaler tilbyr tilpassbare størrelser, animasjoner, bakgrunner og posisjonering. De støtter ulike typer innhold og kan utløses av forskjellige hendelser. De er også tilgjengelige for alle brukere og kan forbedres ytterligere ved å legge til ARIA-attributter og fokusstyring.

Bruksklasser

• modal: Grunnklasse for å opprette en modaldialog;
• modal-dialog: Beholder for modalinnholdet;
• modal-content: Omslutter modalens topptekst, hoveddel og bunntekst;
• modal-header: Beholder for modaltittel og eventuell lukkeknapp;
• modal-title: Stiler tittelen til modalen;
• modal-body: Beholder for hovedinnholdet i modalen;
• modal-footer: Beholder for knapper eller tilleggsinnhold i modalens bunntekst;
• fade: Legger til fade-in-animasjon for jevne overganger;
• modal-dialog-centered: Sentrerer modalen vertikalt i visningsområdet;
• modal-static: Forhindrer at modalen lukkes ved å klikke utenfor eller trykke Escape-tasten.

Eksempel 1: Grunnleggende modal

Eksempel 2: Animasjonsmodal