Modale è una finestra di dialogo o una finestra popup utilizzata per fornire informazioni importanti all'utente prima di intraprendere qualsiasi azione o spostarsi ulteriormente su una pagina web. Fondamentalmente, i modali Bootstrap 5 vengono utilizzati per fornire informazioni come il tempo di sessione o appare quando un utente sta cercando di eliminare o aggiornare qualcosa. Inoltre, viene utilizzato a fini di conferma o per mostrare contenuti nascosti su richiesta.

Questo articolo riguarda

• Come creare un modale in bootstrap 5?
• Modale di base
• Aggiungi animazione a un modale
• Dimensioni modali
• Modale centrato
• Modal a schermo intero
• Modal a schermo intero reattivo
• Modale scorrevole

Come creare un modale

Per creare un modale, prima crea un div con .modale classe insieme al suo unico id Quindi avvolgi questo div attorno a un div con .Dialog modale classe, all'interno di questo div crea un altro div con il .contenuto modale classe e dentro .contenuto modale div crea altri tre div con il .Modal-Header, .corpo modale, .footer modale classi.

.Modal-Header Div contiene il titolo del modale e il suo pulsante di licenziamento.

.corpo modale Div contiene il contenuto principale fuori dal modale.

.footer modale Div contiene i pulsanti di controllo del modale.

Modale di base

Per creare un modale di base, crea un div che usa .modale classe con unica id Dopo quell'avvolgere questo div attorno ai div contenenti .Dialog modale, .contenuto modale, .Modal-Header, .corpo modale E .footer modale Classi come mostrato nell'esempio.

Aggiungi categorie

Questo esempio modale è per l'aggiunta di categorie

Modale aperto

Categorie

Aggiungere
Vicino

Ecco come viene creato un modello di base.

Aggiungi animazione a un modale

Per aggiungere animazione al tuo uso modale .dissolvenza classe con .modale classe:

..

Ecco come viene applicata l'animazione di dissolvenza su modale.

Senza animazione

Rimuovi il .dissolvenza classe per aprire il modale senza alcuna animazione.

..

Ecco come appare un modale senza animazione.

Dimensioni modali

I modali possono avere tre dimensioni:

• Piccolo
• Grande
• Extra grande

Piccolo modale

Per creare un piccolo modale, il .Modal-Sm La classe viene utilizzata:

..

Ecco come viene creato un piccolo modale.

Grande modale

Per creare un grande modale, il .Modal-LG La classe viene utilizzata:

..

Ecco come viene creato un grande modale.

Modale extra grande

Per creare un modale extra grande, il .Modal-xl La classe viene utilizzata:

..

Ecco come viene creato un modale extra grande.

Modali a schermo intero

Se vuoi che il tuo modale appaia all'intero schermo, usa .schermo modale-full classe con .Dialog modale classe.

..

Ecco come viene creato un modale a schermo intero.

Modali reattivi a schermo intero

Possiamo anche controllare quando il modale mostrerà come un modale a schermo intero. Per questo utilizzare le seguenti classi come requisito.

• .Modal-FullScreen-SM-Down Questa classe mostra il modale a schermo intero quando la dimensione dello schermo è inferiore a 576px.
• .Modal-fullscreen-MD-down Questa classe mostra il modale a schermo intero quando la dimensione dello schermo è inferiore a 768px.
• .Modal-fullscreen-lg-down Questa classe mostra il modale a schermo intero quando la dimensione dello schermo è inferiore a 992px.
• .modale-fullscreen-xl-down Questa classe mostra il modale a schermo intero quando la dimensione dello schermo è inferiore a 1200px.
• .modale-fullscreen-xxl-down Questa classe mostra il modale a schermo intero quando la dimensione dello schermo è inferiore a 1400px.

Modale centrato

Utilizzo .Centrod-Dialog-Dialog classe con .Dialog modale per mostrare modali verticalmente e orizzontalmente al centro della pagina.

..

Modale scorrevole

Una barra di scorrimento viene automaticamente aggiunta a una pagina quando il contenuto in un modello è grande.

Quindi non è un buon approccio per scorrere l'intera pagina invece di scorrere il modale solo per risolvere questo problema aggiungi una classe .Scollabile modale-dialog con il .Dialog modale Classe per rendere il modale scorrevole

..

Un modale scorrevole viene creato e funzionante perfettamente.

Conclusione

Modale viene creato usando il .modale Classe che avvolge altri Div contenenti .Dialog modale, .contenuto modale, .Modal-Header, .corpo modale, .footer modale . L'articolo di cui sopra delinea la struttura di base del modale Bootstrap 5 con intestazione, corpo e piè di pagina che contengono pulsanti di azione per l'utente. Inoltre, mette in mostra diversi tipi modali come dimensioni modali, modali con o senza animazione, modali motori centrati e reattivi a schermo intero.