Het Modal-component van Bootstrap is een nuttig hulpmiddel voor het tonen van interactieve inhoud zoals inlogformulieren, afbeeldingsgalerijen of meldingen. Modals zijn in feite dialoogvensters die boven de hoofdinhoud verschijnen en gebruikersinteractie vereisen om te sluiten. Ze kunnen worden geactiveerd door verschillende gebeurtenissen, zoals klikken op knoppen, links of JavaScript-functies.

Belangrijkste kenmerken

Bootstrap-modals bieden aanpasbare groottes, animaties, achtergronden en positionering. Ze ondersteunen verschillende soorten inhoud en kunnen door diverse gebeurtenissen worden geactiveerd. Ze zijn toegankelijk voor alle gebruikers en kunnen verder worden verbeterd door het toevoegen van ARIA-attributen en focusbeheer.

Gebruikte klassen

• modal: Basisklasse voor het maken van een modaal dialoogvenster;
• modal-dialog: Container voor de modale inhoud;
• modal-content: Omhulsel voor de modale header, body en footer;
• modal-header: Container voor de modale titel en optionele sluitknop;
• modal-title: Stijlt de titel van de modal;
• modal-body: Container voor de hoofdinhoud van de modal;
• modal-footer: Container voor knoppen of extra inhoud in de modale footer;
• fade: Past een fade-in animatie toe op de modal voor vloeiende overgangen;
• modal-dialog-centered: Centreert de modal verticaal binnen het venster;
• modal-static: Voorkomt dat de modal wordt gesloten door buiten het venster te klikken of op Escape te drukken.

Voorbeeld 1: Basis Modal

Voorbeeld 2: Geanimeerde Modal