Outils pour utilisateurs

Outils du site


cours2011:bases_de_la_programmation_orientee_objets_et_evenementielle:fenetre_modale

Fenêtre modale

Le but est d'obtenir ceci.

Le plus simple est de partir du slider par animation CSS : simplement supprimer les styles CSS.

Travail

Sortir ses notes de TD !

Suivre les étapes, tester à chaque fois, demander si vous n'obtenez pas l'effet désiré.

L'effet en CSS

  • Cacher les slides par défaut (display:none).
  • Ajoutez un élément d'ID “cache” a la fin du document, puis ajouter les styles :
    • Lui donner une couleur de fond avec un effet de transparence (background-color:rgba(5,10,15,0.8))
    • Le positionner (position:absolute) et lui faire occuper toute la surface (top:0; left:0; right:0; bottom:0;)
    • Le placer au-dessus du contenu (z-index:99;), mais sous les slides.
  • Ajouter à un slide la classe CSS : “visible”, puis écrire le style CSS :
    • Rendre celui-ci visible (display:block)
  • Mettre en place les slides (les styles CSS) :
    • Fixer leurs hauteurs et largeurs
    • Les positionner en absolu
    • Les placers au milieu (top:50%; left:50%;)
    • Les décaler pour les centrer :
      • margin-top : valeur négative, la moitié de la hauteur.
      • margin-left : valeur négative, la moitié de la largeur.
    • Fignoler la présentation (bord, couleur de fond…)
  • Ajouter à la fin du slide visible un élément d'ID “close” contenant le texte “X”
    • Écrire les styles CSS : position en haut à droite, taille, bords…

Vous devez obtenir un effet comparable à :

JavaScript

Gérer la fermeture

Ajouter au code JavaScript un gestionnaire d'événement :

  • Utiliser la délégation : $(document).on("click", "sélecteur", function() {...} ) car on le bouton de fermeture sera crée plus tard (quand on affiche un slide).
  • Le sélecteur régira à deux éléments (c.-à-d. les séparer par une virgule)
    • Le cache (utiliser l'identifiant).
    • Le bouton de fermeture (il a une classe CSS est il est dans le slide “visible”.
  • Dans la fonction :
    • Faire disparaître le cache (fadeOut)
    • Enlever la classe “visible” (à l'élément “visible”)
      • Éventuellement après l'avoir fait disparaître (fadeOut)
    • Supprimer le bouton de fermeture (remove)

Page à l'état initial

  • Retire la classe “visible” du slide
  • Ajouter un display:none au cache

Gérer l'affichage

Partir du gestionnaire d'événement du slider :

  • Garder le code jusqu'à la partie qui permet de trouver le slide, puis ajoutez :
    • Faire apparaître le cache (fadeIn)
    • Ajouter la classe CSS “visible” au slide
      • Et un effet d'apparition (fadeIn)
    • Ajouter le bouton de fermeture : slide.append("<div class='close'>X</div>");

Petite amélioration finale :

  • Suprimer le code HTML du “cache”
  • L'ajouter par le biais de JavaScript à $(body) (cf: voir avant).

animation CSS

Exemple d'effet :
http://www.paulrhayes.com/2011-03/css-modal/

Pour ajouter une classe CSS et avoir l'animation :

setTimeout(function () {
  slide.addClass("anim");
}, 0);

Simplement placer dans le code CSS l'animation associé à la classe “anim”.

.slider div.visible {
  -webkit-transition: -webkit-transform 1s ease-out;
  -webkit-transform: scale(0.1);
}
 
.slider div.visible.anim {
  -webkit-transform: scale(1);
}

Plus

Vous pouvez faire un effet d'animation qui donne l'impression que la fenêtre part du lien. Voir exemple.

Vous aurez sans doute besoin de la méthode offset de jQuery.

cours2011/bases_de_la_programmation_orientee_objets_et_evenementielle/fenetre_modale.txt · Dernière modification: 2012/05/17 22:00 (modification externe)