Outils pour utilisateurs

Outils du site


cours2012: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:fixed) 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);
}

Animation CSS à base de "keyframes"

  • Animations complexes (plusieurs étapes) en utilisant la déclaration CSS @keyframes.

Exemple d'usage : Animate.css

Le but est d'obtenir : voir vidéo.

Travail

Animation CSS (keyframes)

  • Supprimer le code existant qui ajoute/supprime le bouton de fermeture.
    • Le remplacer par le code qui l'ajoute à tous dés le chargement de la page :
// ajoute à tous les slides le bouton
$('#slider>div').append("<div class='close'>X</div>");
  • Télécharger et lier à votre page une version contenant les animations désirées : http://daneden.me/animate/build/
    • La suite du TP utilise flipInY et flipOutY (utilisez un autre effet si votre navigateur ne le supporte pas)
  • Pour montrer un slide :
    • Ajouter les classes “animated visible”.
    • Retirer la classe flipOutY, ajouter la classe flipInY
  • Pour cacher un slide :
    • Retirer la classe flipInY, ajouter la classe flipOutY

Interaction avec JavaScript

Interaction avec JavaScript en utilisant l'événement animationEnd (et il existe le même pour les transitions.

Le problème est que ce n'est pas encore normalisé et que le nom de l'événement varie suivant les navigateurs !

Ajouter le code suivant au moment ou vous ajouter l'animation :

  // variable à placer en début de script
  var ANIMATIONEND = "webkitAnimationEnd msAnimationEnd oAnimationEnd animationend";
 
  // code qui écoute l'événement (sur tout navigateur)
  $('.slider>.visible').on(ANIMATIONEND,function () {
      console.log("fin animation !");
      // retire le(s) gestionnaire d'événement.
      $('.slider>.visible').off(ANIMATIONEND);
  });
cours2012/bases_de_la_programmation_orientee_objets_et_evenementielle/fenetre_modale.txt · Dernière modification: 2013/05/21 03:03 (modification externe)