Modal est une boîte de dialogue ou une fenêtre contextuelle qui est utilisée pour donner des informations importantes à l'utilisateur avant de prendre des mesures ou de se déplacer plus loin sur une page Web. Fondamentalement, les modaux Bootstrap 5 sont utilisés pour fournir des informations comme le temps de session ou il apparaît lorsqu'un utilisateur essaie de supprimer ou de mettre à jour quelque chose. De plus, il est utilisé à des fins de confirmation ou pour afficher le contenu caché à la demande.

Cet article est à propos de

• Comment créer un modal dans bootstrap 5?
• Modal de base
• Ajouter une animation à un modal
• Tailles modales
• Modal centré
• Modal complet
• Modal complet réactif
• Défilement modal

Comment créer un modal

Pour créer un modal, créez d'abord un div avec .modal classe avec son unique identifiant Ensuite, enveloppez cette div autour d'un div avec .dialogue modal classe, à l'intérieur de cette div, créez un autre div avec le .contenu modal classe et à l'intérieur .contenu modal div créer trois autres divs avec le .tête-à-tête, .corps modal, .footteur modal Des classes.

.tête-à-tête Div contient le titre du modal et son bouton de licenciement.

.corps modal Div contient le contenu principal du modal.

.footteur modal Div contient les boutons de commande du modal.

Modal de base

Pour créer un modal de base, créez une div qui utilise .modal classe avec unique identifiant Après cela, enveloppez cette div autour des div contenant .dialogue modal, .contenu modal, .tête-à-tête, .corps modal et .footteur modal classes comme indiqué dans l'exemple.

Ajouter des catégories

Cet exemple modal est pour ajouter des catégories

Modal ouvert

Catégories

Ajouter
Fermer

C'est ainsi qu'un modèle de base est créé.

Ajouter une animation à un modal

Pour ajouter l'animation à votre utilisation modale .disparaître classe avec .modal classe:

…

C'est ainsi que l'animation de fondu est appliquée sur le modal.

Sans animation

Retirer le .disparaître classe pour ouvrir le modal sans aucune animation.

…

C'est à quoi ressemble un modal sans animation.

Tailles modales

Les modaux peuvent avoir trois tailles:

• Petit
• Grand
• Extra large

Petit modal

Pour créer un petit modal, le .modal-sm La classe est utilisée:

…

C'est ainsi qu'un petit modal est créé.

Grand modal

Pour créer un grand modal, le .modal-lg La classe est utilisée:

…

C'est ainsi qu'un grand modal est créé.

Extra grand modal

Pour créer un modal très grand, le .modal-xl La classe est utilisée:

…

C'est ainsi qu'un modal extra-grand est créé.

Modaux en plein écran

Si vous voulez que votre modal apparaisse en plein écran, utilisez .écran modal classe avec .dialogue modal classe.

…

C'est ainsi qu'un modal complet est créé.

Modaux complets réactifs

Nous pouvons également contrôler lorsque le modal se présentera comme un modal plein écran. Pour cela, utilisez les classes suivantes comme exigence.

• .modal-fullscreen-sm-down Cette classe affiche le modal plein écran lorsque la taille de l'écran est inférieure à 576px.
• .modal-fullscreen-md-down Cette classe affiche le modal plein écran lorsque la taille de l'écran est inférieure à 768px.
• .modal-fullscreen-lg-down Cette classe affiche le modal plein écran lorsque la taille de l'écran est inférieure à 992px.
• .modal-fullscreen-xl-down Cette classe affiche le modal plein écran lorsque la taille de l'écran est inférieure à 1200px.
• .modal-fullscreen-xxl-down Cette classe affiche le modal plein écran lorsque la taille de l'écran est inférieure à 1400px.

Modal centré

Utiliser .axé sur le dialogue modal classe avec .dialogue modal montrer modal verticalement et horizontalement au centre de la page.

…

Défilement modal

Une barre de défilement est automatiquement ajoutée à une page lorsque le contenu d'un modèle est grand.

Ce n'est donc pas une bonne approche pour faire défiler toute la page au lieu de faire défiler le modal uniquement pour résoudre ce problème Ajouter une classe .dirmable modal avec le .dialogue modal classe pour rendre le défilement modal

…

Un modal défilable est créé avec succès et fonctionne parfaitement bien.

Conclusion

Modal est créé en utilisant le .modal classe qui s'enroule autour d'autres div contenant .dialogue modal, .contenu modal, .tête-à-tête, .corps modal, .footteur modal . L'article ci-dessus décrit la structure de base du modal bootstrap 5 avec un en-tête, un corps et un pied de page qui contiennent des boutons d'action pour l'utilisateur. En outre, il présente différents types modaux comme les tailles modales, les modaux avec ou sans animation, modaux modaux centrés et réactifs.