Comment coiffer le modal bootstrap

La fenêtre contextuelle fait référence à la petite fenêtre de l'écran de la fenêtre existante. Il est utilisé pour afficher des informations supplémentaires ou nouvelles dans n'importe quelle application. Parfois, il est également connu comme une publicité. Bootstrap fournit de nombreuses classes qui aident à créer facilement des fenêtres modales. Cependant, en utilisant CSS, la fenêtre modale peut être conçue en fonction de vos goûts.

Cet article décrira comment coiffer le modal bootstrap.

Comment coiffer le modal bootstrap?

Pour apprendre à coiffer le modal bootstrap, suivez les étapes ci-dessous.

Étape 1: Créez un fichier HTML

Tout d'abord, créez un modal en suivant les instructions ci-dessous:

• Créer un ""Conteneur et attribuez-lui une classe"contenant du principal modal".
• Ensuite, ajoutez un bouton qui déclenchera la fenêtre modale. Attribuez-le le «btn","btn-primaire", et "show-modal" Des classes. Définir les attributs de données "data-toggle"Avec la valeur"modal" et le "cible de données" avec le "#mymodal" valeur. Cet identifiant pointe vers l'ID de la fenêtre modale.
• Ensuite, créez la fenêtre modale. Pour ce faire, ajoutez un ""Element et attribuez-le"modal" et "disparaître»Classes et définissez l'ID.
• Ajouter un "«Pour la boîte de dialogue du modal et affectez-le le«dialogue modal" classe.
• Ensuite, spécifiez le contenu du modal dans un «» et attribuez-le la classe «contenu modal".
• Faites un bouton de fermeture avec la classe "fermer". Le "dissolution»L'attribut est utilisé pour fermer la fenêtre modale.
• Ensuite, spécifiez le corps modal avec les classes "corps modal" et "ligne". À l'intérieur, prenez une colonne de 6 grilles pour l'image et 6 pour le contenu.
• L'image est intégrée à l'aide du «" étiqueter.
• Ensuite, à l'intérieur du «”Élément avec le"contenu”Classe, ajoutez le titre, le sous-titre et la description.
• Après cela, placez un bouton avec le bootstrap "btn","danger btn", et "P-2" Des classes:

Afficher le modal




×

Offre spéciale

20% de réduction sur les points à emporter et la livraison

Meilleures chemises de qualité. Chaque taille est disponible. Facilement lavable.

VOIR PLUS

Étape 2: Style «Classe principale-container»

Le conteneur entier est stylé avec le CSS "famille de polices" propriété:

.container de modal principal
Font-Family: «Poppins», Sans-Serif;

Étape 3: Classe de style «show-modal»

Le "show-modal«La classe est déclarée avec les propriétés suivantes:

.contenant du principal modal .show-modal
Couleur: #FFF;
Color en arrière-plan: # 3A97C9;
Transform de texte: capitaliser;
rembourrage: 10px 15px;
marge: 80px auto 0;
bloc de visualisation;

Ici:

• "couleur”Définit la couleur de la police.
• "Couleur de l'arrière plan”Définit la couleur d'arrière-plan de l'élément.
• "transformation de texte»Capitalise le texte.
• "rembourrage"Ajuste l'espace autour du contenu de l'élément.
• "marge»Produit de l'espace autour de l'élément.
• "afficher"Avec la valeur"bloc»Définit la largeur de l'élément à 100%.

Étape 4: Style Classe «modal-dialog» sur Fade

.modal.disparaître .modal-dialog
transformée: échelle (0);
Transition: les 450 ms cubes-Bezier (.47, 1.64, .41, .8);

Lorsque le modal s'estompe, les propriétés CSS suivantes sont appliquées au «dialogue modal" classe:

• "transformer»Propriété avec le«escalader()«La valeur augmente ou diminue la taille de l'élément verticalement ou horizontalement.
• "transition»Déplace progressivement l'élément. Le "cubic-bezier ()»La fonction applique la courbe Cubic Bezier. Il est déterminé par quatre points.

Étape 5: Classe de style «modal-dialog» exposée

.modal.montrer .modal-dialog
transformée: échelle (1);

Le CSS "transformer«Propriété avec la valeur»échelle (1)»Augmente la taille de la boîte de dialogue.

Étape 6: Classe de style «contenu modal»

.contenant du principal modal .dialogue modal .contenu modal
Border-Radius: 30px;
Border: aucun;
débordement caché;

Le "contenu modal"Est décoré des propriétés suivantes:

• "rayon frontalier"Arrond les bords de l'élément.
• "frontière"Avec la valeur"aucun»Cache la frontière.
• "débordement»Contrôle le flux du contenu.

Étape 7: Style «Close» Classe

.contenant du principal modal .dialogue modal .contenu modal .fermer
Couleur: # 747474;
Color en arrière-plan: RGBA (255, 255, 255, 0.5);
hauteur: 27px;
Largeur: 27px;
rembourrage: 0;
Opacité: 1;
débordement caché;
Position: absolue;
À droite: 15px;
en haut: 15px;
Z-Index: 2;

Ici:

• "opacité»Définit le niveau de transparence de l'élément.
• "position"Avec la valeur"absolu"Définit la position de l'élément par rapport à sa position parentale.
• "droite" et "haut”Réglez l'espace à droite et en haut du bouton Fermer.
• "index z»Spécifie l'ordre de pile de l'élément. L'ordre de pile plus grand amène l'élément à l'avant.

Étape 8: Style «Modal-Body» Classe

.contenant du principal modal .dialogue modal .contenu modal .Modal-Body
rembourrage: 0 !important;

L'espace autour de tout le corps modal est ajusté par CSS "rembourrage" propriété. De plus, le «!important»Le mot-clé est utilisé pour définir l'importance de l'élément.

Étape 9: Élément de style «IMG»

.contenant du principal modal .dialogue modal .contenu modal .corps modal .iMage modal img
hauteur: 100%;
Largeur: 100%;

Étape 10: Style la classe «Contenu»

.contenant du principal modal .dialogue modal .contenu modal .corps modal .contenu
rembourrage: 35px 30px;

En utilisant le «rembourrage«Propriété, l'espace est ajouté autour du«contenu"Contenu de la classe.

Étape 11: classe «titre» de style

.contenant du principal modal .dialogue modal .contenu modal .corps modal .titre
Couleur: # FB3640;
Font-Family: «Sacramento», cursive;
taille de police: 35px;

Ici:

• "famille de polices»Définit le style de la police.
• "taille de police"Définit la taille de la police.

Étape 12: Classe de style «sous-titre»

.contenant du principal modal .dialogue modal .contenu modal .corps modal .Sous-titre
Police-poids: 600;
Text-transform: majuscules;
marge: 0 0 20px;
bloc de visualisation;

Selon l'extrait de code donné:

• "poids de police"Définit l'épaisseur de la police.
• "transformation de texte»Définit le cas de police.

Sortir

C'est ainsi que vous pouvez styliser le modal bootstrap.

Conclusion

Pour styliser la fenêtre modale bootstrap, d'abord, ajoutez le bouton qui déclenchera le modal. Ensuite, faites la fenêtre modale en utilisant des éléments HTML. Après cela, ajoutez plusieurs propriétés CSS, notamment «rembourrage","marge","couleur","transition», Et bien d'autres pour styliser la fenêtre modale. Plus précisément, le «cubique»La fonction est utilisée pour appliquer l'effet de transition dans une courbe de quatre points sur la fenêtre modale. Ce message a expliqué la procédure pour coiffer le modal bootstrap.