• Fenêtre modale (pop-in)

    Par Mike GMZ dans Accueil le 23 Juin 2014 à 10:52

     
     

    Hello!
    Les derniers articles se trouvent dans la rubrique : Articles news
    ci-contre à gauche..!

    Entrez sur le blog
     



     
    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 (<>).

    Api Youtube en JS Ne pas placer le code CSS dans " Ajout CSS ", cause imcompatiblité de l'éditeur Api Youtube en JS


    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.

               (Recharger la page)



    <!-----fenêtre modale (pop-in)animéee - par Mike GMZ - © Juin 2014---->


<div id="fond" style="display: block;">&nbsp;</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



    Suivre le flux RSS des articles
    Suivre le flux RSS des commentaires

Version standard

Poursuivre l'affichage en version standard (ordinateur),

cliquer ci-dessous

Clic ici

(Puis fermer cette fenêtre, en haut à droite)