Il componente Modal di Bootstrap è uno strumento utile per mostrare contenuti interattivi come moduli di accesso, gallerie di immagini o avvisi. I modali sono essenzialmente finestre di dialogo che si sovrappongono al contenuto principale e richiedono l'interazione dell'utente per essere chiuse. Possono essere attivati tramite diversi eventi come clic su pulsanti, link o funzioni JavaScript.

Caratteristiche principali

I modali di Bootstrap offrono dimensioni personalizzabili, animazioni, sfondi e posizionamento. Supportano vari tipi di contenuto e possono essere attivati da diversi eventi. Sono inoltre accessibili a tutti gli utenti e possono essere ulteriormente migliorati aggiungendo attributi ARIA e gestione del focus.

Classi di utilizzo

• modal: Classe base per creare una finestra di dialogo modale;
• modal-dialog: Contenitore per il contenuto del modale;
• modal-content: Wrapper per l'intestazione, il corpo e il piè di pagina del modale;
• modal-header: Contenitore per il titolo del modale e l'eventuale pulsante di chiusura;
• modal-title: Stile per il titolo del modale;
• modal-body: Contenitore per il contenuto principale del modale;
• modal-footer: Contenitore per pulsanti o contenuti aggiuntivi nel piè di pagina del modale;
• fade: Applica un'animazione di dissolvenza al modale per transizioni fluide;
• modal-dialog-centered: Centra verticalmente il modale all'interno della finestra;
• modal-static: Impedisce la chiusura del modale cliccando all'esterno o premendo il tasto Escape.

Esempio 1: Modale di base

Esempio 2: Modale animato