-
Par Mike GMZ le 23 Juin 2014 à 10:52
Hello!
Entrez sur le blog
Les derniers articles se trouvent dans la rubrique : Articles news
ci-contre à gauche..!Une fenêtre modale (ou pop-in) animée,
à l'ouverture du blog ou d'un article, ça vous tente?
On part sur le principe d'effet Lightbox, c'est à dire une fenêtre sur un fond coloré semi-transparent.
Bon, pas très original, j'avais même déjà fait un article sur ce sujet.
Cela répond à une demande sur le forum d'Ekla (voir ici)
Mais ici, on va ajouter des animations CSS, ce qui rend l'ensemble " Fun ".....!
Pensez à mettre votre adresse (url) dans le lien " Entrez sur le blog ", à la place de " #nogo "
Le code HTML ci-dessous est à placer en début d'article (page d'accueil par exemple), et le code CSS
soit en début d'article avant le code HTML, entre les balises <style> et </style>, soit dans un module
simple en mode source (<>).
Ne pas placer le code CSS dans " Ajout CSS ", cause imcompatiblité de l'éditeur
Cette popin s'affichera une seule fois par session, c'est à dire tant que la page de votre navigateur
est ouverte. Le fait de fermer ou de rafraichir la page (F5), réinitialisera la popin.
Pour cela j'utilise la fonction "session-storage" qui permet de stocker des informations dans le navigateur.
<!-----fenêtre modale (pop-in)animéee - par Mike GMZ - © Juin 2014----> <div id="fond" style="display: block;"> </div> <div id="popin" class="animatebox animation swing" style="display: block;"> <p>Mon texte ici <img src="http://ekladata.com/YE1mVCx_IJ1inUDgl6adCP6e0oU.jpg" alt="" /> et la suite de mon texte...et encore du texte, et du texte, toujours du texte...et je bouge aussi, Yeahhhh!!!</p> <a class="animatebox2 animation bounce" href="#nogo">Entrez sur le blog</a> <div id="close" title="Fermer la fenetre" onclick="document.getElementById('fond').style.display = 'none';document.getElementById('popin').style.display = 'none'">X</div> </div> <br><br> <!-----------------------------------Session-storage----------------------------------------> <script>// <![CDATA[ if (!sessionStorage.pageLoadCount) { sessionStorage.pageLoadCount = 0; } sessionStorage.pageLoadCount = parseInt(sessionStorage.pageLoadCount) + 1; document.getElementById('count').textContent = sessionStorage.pageLoadCount;document.getElementById('fond').style.display = "none";document.getElementById('popin').style.display = "none"; // ]]></script>
See the Pen Fenêtre modale/Pop-in animée by Mike (@mikegmz) on CodePen.
.Vous avez vu cette page 0 fois.
55 commentaires