Bootstrap Modal-komponenten är ett användbart verktyg för att visa interaktivt innehåll såsom inloggningsformulär, bildgallerier eller varningsmeddelanden. Modaler är i grunden dialogrutor som visas ovanpå huvud­innehållet och kräver användarinteraktion för att stängas. De kan aktiveras med olika händelser, till exempel knapptryckningar, länkar eller JavaScript-funktioner.

Viktiga funktioner

Bootstrap-modaler erbjuder anpassningsbara storlekar, animationer, bakgrunder och positionering. De stödjer olika typer av innehåll och kan utlösas av olika händelser. De är också tillgängliga för alla användare och kan förbättras ytterligare genom att lägga till ARIA-attribut och fokus­hantering.

Användningsklasser

• modal: Grundklass för att skapa en modal dialogruta;
• modal-dialog: Behållare för modalens innehåll;
• modal-content: Omslag för modalens header, body och footer;
• modal-header: Behållare för modalens titel och eventuell stängningsknapp;
• modal-title: Stilar titeln på modalrutan;
• modal-body: Behållare för modalens huvudinnehåll;
• modal-footer: Behållare för knappar eller ytterligare innehåll i modalens footer;
• fade: Lägger till en fade-in-animation för mjuka övergångar;
• modal-dialog-centered: Centrerar modalrutan vertikalt i vyn;
• modal-static: Förhindrar att modalrutan stängs genom att klicka utanför eller trycka på Escape-tangenten.

Exempel 1: Grundläggande modal

Exempel 2: Animerad modal