Javascript Css Modal

| | | | | | | | | | | | | | | | | | | | | |

Un modal est une fenêtre distincte de la fenêtre principale d’une page Web. L’objectif principal est de désactiver la fenêtre principale de l’interaction de l’utilisateur et de partager des informations ou de confirmer quelque chose avec l’utilisateur. Les fenêtres modales sont couramment utilisées comme composants de connexion, confirmation d’entrée utilisateur ou une multitude d’autres utilisations.

Bootstrap est un framework qui peut nous aider à créer des composants très rapidement. Dans cet article, nous examinons comment configurer Bootstrap, apprenons pourquoi nous pourrions avoir besoin d’un modal et examinons quelques exemples de modaux en action à l’aide du framework Bootstrap.

Pour commencer

Pour vous assurer que vous pouvez voir un modal sur notre page Web, assurez-vous d’avoir les bonnes dépendances. Pour ce projet, nous avons besoin de Bootstrap, Popper.JS et jQuery. Accédez à la page Démarrage rapide de Bootstrap pour obtenir de l’aide pour obtenir toutes vos addictions.

C’est à vous de décider comment connecter les packages dont nous avons besoin, mais le moyen le plus simple et le plus convivial pour les débutants consiste à utiliser le réseau de diffusion de contenu - le CDN - pour jQuery, Popper.js et Bootstrap. Faites attention à l’ordre de votre

Dans l’éditeur de code ci-dessus, nous avons utilisé CSS pour changer le style des boutons et le fond du modal. Dans cet exemple, j’ai ajouté un nom de classe personnalisé au lieu d’essayer de remplacer tout CSS déjà fourni par Bootstrap à l’aide du mot clé ! Important.

< / div>

Conclusion

Le principal obstacle lors de la création d’un modal à l’aide de Bootstrap est de s’assurer que la documentation est correctement prête. Le plus souvent, s’il y a une erreur, c’est très probablement d√ª à une copie / coller erreur, une erreur dans la position de la feuille CDN ou de style dans l’ en- tête / corps de votre HTML, ou que votre CSS ne vise pas l’élément correct.

Certains de ces styles viennent coutume avec essai et erreur. Ce qui est bien, c’est que la documentation de Bootstrap est très complète - si vous n’avez pas appris d’autre framework ou package avant cela, vous avez de la chance car la documentation est assez volumineuse et assez simple à comprendre.