Bootstrap | Plugin modal
Le composant modal bootstrap est une boîte de dialogue qui apparaît à l'écran. Il contient le contenu tel que le titre, le texte, les boutons, etc. Il est convivial et flexible pour afficher le contenu dans une application Web. De plus, vous pouvez modifier son apparence pour s'adapter au style de votre application.
Cet article vous guidera sur:
- Qu'est-ce qu'un plugin modal?
- Comment créer un modal en bootstrap?
- Comment ajuster la taille modale dans bootstrap?
Qu'est-ce qu'un plugin modal?
Le plugin modal utilise JavaScript ou des attributs de données pour ouvrir ou masquer le contenu selon les besoins. Plus précisément, c'est une boîte de dialogue ou une boîte contextuelle affichée en haut de la page.
Comment créer un modal en bootstrap?
Pour créer un modal en bootstrap, suivez les étapes mentionnées.
Étape 1: Créez un bouton pour déclencher le modal
Tout d'abord, créez un bouton qui déclenche la fenêtre modale en utilisant le bouton ou les éléments de liaison. Les principaux attributs utilisés dans cet élément sont «data-toggle" et "cible de données". Pour ce faire, consultez les instructions suivantes:
- L'élément de bouton est créé à l'aide du «btn","btn-primaire", et "btn-lg" Des classes.
- Spécifie le "data-toggle”Attribut qui ouvre la fenêtre modale.
- "cible de données"Porte l'ID du modal.
Voici le code HTML:
Sortir
Étape 2: Créez une fenêtre modale
La fenêtre modale est créée en suivant les étapes:
- Ajouter un "”Element et attribuez-le l'ID. Cet identifiant doit correspondre au «cible de données«Valeur de l'attribut. Dans notre cas, "démomodal”Est spécifié comme l'ID de conteneur.
- "modal»La classe met en évidence et reconnaît le contenu de la div comme un modal.
- "disparaître”La classe applique l'effet de transition de fondu et de décoloration à la fenêtre modale. Vous pouvez facilement supprimer ce cours si vous n'en voulez pas.
- "dialogue modal»La classe ajuste la largeur et la marge de la boîte de dialogue modale. Le contenu du modal est spécifié dans le conteneur créé.
Voici la mise en œuvre du scénario ci-dessus:
Étape 3: spécifiez le contenu modal
Le contenu du modal est spécifié dans le conteneur div ayant une classe «dialogue modal". Les étapes ci-dessous sont implémentées pour y ajouter du contenu:
- Tout d'abord, ajoutez un ""Élément avec la classe"contenu modal".
- À l'intérieur, créez un en-tête, un corps et un pied de page en utilisant les classes "tête-à-tête","corps modal", et "footteur modal".
- Dans l'en-tête, spécifiez un bouton Fermer et le titre à l'aide du «titres modaux" classe.
- Ensuite, spécifiez la partie du corps en utilisant le "corps modal" classe.
- Après l'en-tête et le corps, créez un pied de page en appliquant le «footteur modal" classe. La partie de pied de page contient le bouton qui ferme la fenêtre modale:
Linuxhint
Linuxhint est le meilleur site Web de tutoriel.
Sortir
Comment ajuster la taille modale dans bootstrap?
La taille de la fenêtre modale peut être déterminée à l'aide du «modal-*"Classe, où l'astérisque"*»Le symbole indique la taille de la fenêtre modale.
Petite fenêtre modale
Dans l'exemple ci-dessous, le «"Élément ayant une classe"dialogue modal"On attribue une classe"modal-sm»:
En conséquence, la fenêtre modale s'ouvrira en petite taille:
Grande fenêtre modale
Maintenant, la classe "modal-lg”Est spécifié pour ouvrir la fenêtre modale en grande taille:
Sortir
C'est tout au sujet du plugin modal.
Conclusion
Pour créer un modal dans bootstrap, créez d'abord un bouton ou un lien qui déclenchera le modal. Ensuite, créez la fenêtre modale à l'aide de la classe "modal" et "dialogue modal". À l'intérieur du conteneur, spécifiez le contenu du modal en utilisant le «contenu modal". Utilisez le «titres modaux","corps modal", et "footteur modal”Classes pour ajouter le titre du modal, le corps modal et le pied de pied du modal. Ce message a expliqué ce qu'est un plugin modal et comment le créer.