Bootstrapin Modal-komponentti on hyödyllinen työkalu interaktiivisen sisällön, kuten kirjautumislomakkeiden, kuvagallerioiden tai ilmoitusten, esittämiseen. Modaalit ovat käytännössä valintaikkunoita, jotka ilmestyvät pääsisällön päälle ja vaativat käyttäjän toimenpiteen sulkeutuakseen. Ne voidaan aktivoida erilaisilla tapahtumilla, kuten painikkeen painalluksilla, linkeillä tai JavaScript-funktioilla.

Keskeiset ominaisuudet

Bootstrap-moduuleissa on muokattavat koot, animaatiot, taustat ja sijainnit. Ne tukevat erilaisia sisältötyyppejä ja voidaan laukaista eri tapahtumilla. Ne ovat saavutettavia kaikille käyttäjille ja niitä voidaan parantaa lisäämällä ARIA-attribuutteja ja hallitsemalla kohdistusta.

Käyttöluokat

• modal: Perusluokka modaalisen valintaikkunan luomiseen;
• modal-dialog: Modaalin sisällön säiliö;
• modal-content: Kehys modaalin otsikolle, rungolle ja alatunnisteelle;
• modal-header: Säiliö modaalin otsikolle ja valinnaiselle sulkupainikkeelle;
• modal-title: Muotoilee modaalin otsikon;
• modal-body: Säiliö modaalin pääsisällölle;
• modal-footer: Säiliö painikkeille tai lisäsisällölle modaalin alatunnisteessa;
• fade: Lisää modaalille pehmeän siirtymäanimaation;
• modal-dialog-centered: Keskittää modaalin pystysuunnassa näkymään;
• modal-static: Estää modaalin sulkemisen klikkaamalla ulkopuolelle tai painamalla Escape-näppäintä.

Esimerkki 1: Perusmodaali

Esimerkki 2: Animoitu modaali