FINESTRE MODALI
Il componente Modal è una finestra di dialogo a comparsa visualizzata nella parte superiore della pagina corrente. L’esempio seguente mostra come creare un modale di base:
AGGIUNGERE UN’ANIMAZIONE
Usa la classe .fade per aggiungere un effetto di dissolvenza quando apri e chiudi la finestra modale:
<!– Fading modal –>
<div class=”modal fade“></div>
<!– Modal without animation –>
<div class=”modal“></div>
MODAL SIZE
Modifica la dimensione del modale aggiungendo la classe .modal-sm per i modali piccoli (larghezza massima 300px), la classe .modal-lg per i modali grandi (larghezza massima 800px) o .modal-xl per i modali extra large (max -larghezza 1140px). L’impostazione predefinita è 500 px di larghezza massima. Aggiungi la classe size all’elemento <div> con la classe .modal-dialog:
<div class=”modal-dialog modal-sm“>
MODAL FULLSCREEN
Se vuoi che il modale si estenda su tutta la larghezza e l’altezza della pagina, usa la classe .modal-fullscreen:
<div class=”modal-dialog modal-fullscreen“>
RESPONSIVE FULLSCREEN MODAL
Puoi anche controllare quando il modale deve essere a schermo intero, con le classi .modal-fullscreen-*-*:
CENTRARE UN MODALE
Centra il modale verticalmente e orizzontalmente all’interno della pagina, con la classe .modal-dialog-centered:
<div class=”modal-dialog modal-dialog-centered“>
SCROLLING DI UN MODALE
Quando hai molti contenuti all’interno del modale, aggiungi una barra di scorrimento alla pagina. Guarda l’esempio seguente per capirlo:
Scrivi un commento