article(s) dans votre panier VOIR

Intégrer des fenêtres modales avec un minimum de configuration avec le framework Materialize CSS

  • Vidéo 15 sur 20
  • 2h22 de formation
  • 20 leçons

Un contenu flash devrait s'afficher ici. Votre navigateur ne comporte pas de plugin flash, ou il ne s'est pas correctement initialisé.

Vous pouvez télécharger le plugin flash depuis le site d'Adobe à l'adresse suivante : http://get.adobe.com/flashplayer/.

Pour accéder à la suite de cette formation, vous devez vous abonner.
previous
summary
resume
next
play
Des fenêtres modales avec un minimum de configuration
00:00 / 07:42
HD
fullscreen
Je m’abonne
à partir de 16,6 € / mois
  • Visionnage en ligne
  • Accès illimité à toutes nos formations
OU
J'achète uniquement
la formation
39,90€
  • Téléchargement + VOD à vie
  • Accès uniquement à cette formation

Détails de la formation

Dans ce tuto pour maîtriser Materialize CSS, le formateur expert Jean Bernard André vous montre comment insérer des fenêtres modales avec un minimum de configuration. Ce cours a pour objectif de vous aider à créer des espaces pour mettre des éléments dans votre site tels que les conditions générales de vente. Pour y parvenir, vous devez commencer par délimiter la place de la fenêtre dans l’interface à partir du code div.col.s12. Cela terminé, vous le validez et vous avez un code HTML généré automatiquement. Par la suite, vous créez un lien à partir d’un bouton pour afficher l’élément en saisissant le code a.btn.wave effect.waves light. Dans la balise qui en résulte, vous mettez le nom du bouton. Il est également possible de mettre une icône à la place du nom. Pour réaliser la fenêtre modale, vous faites le code divmodal1.modal. Le code HTML généré, vous créez tous les éléments qui se trouvent dans la fenêtre. Une fois fait, vous ajoutez des options telles qu’un fixed-footer. Afin de l’utiliser, vous devez créer une Div avec une classe modal-footer sous la condition. Ce procédé permet de générer des éléments qui apparaissent en permanence dans la partie inférieure de la fenêtre quelle que soit la taille du contenu. Vous pouvez utiliser ce procédé pour créer les cases à cocher pour accepter les conditions de vente. Pour fermer la fenêtre modale immédiatement après le clic, vous utilisez la classe model-close. Suite à la visualisation de ce cours, vous savez maintenant comment gérer le bouton de validation de la fenêtre modale.