Une fenetre modale pour sa page d’accueil, ColorBox

Une fenetre modale pour sa page d’accueil : ColorBox

Nous avons vu dans un premier tuto comment ouvrir une popup au chargement de la page d’accueil. Cela peut servir par exemple pour informer l’utilisateur, le rediriger vers plusieurs liens possibles etc.. Une deuxième solution, pour ouvrir une pop up au chargement de la page, est d’utiliser le plugin ColorBox:

See the Pen timeOutpopup by yuyazz (@yuyazz) on CodePen.

Voici le code html de ma page index.html

   	<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
  </head>
  <body>

</p>
<h1>Hello, there!</h1>
<p>


</p>
<h2>This is some content</h2>
<p>

    
The popup will open in five seconds

    

En jouant sur la valeur du setTimeout, on peut ouvrir la pop up quand on veut :500 pour une demi seconde, 1000 pour une seconde etc…Ici on laisse le timeout à 5000 pour bien montrer les capacités du plugin.On peut s’en servir pour afficher des pubs, les derniers articles etc…à la place du href, on peut placer n’importe quelle page de son site. On peut également, pour le confort de l’utilisateur, rajouter un compteur :

See the Pen timeOut popup by yuyazz (@yuyazz) on CodePen.

Voici mon code html modifié :

  	<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
  </head>
  <body>

    
The popup will open in <span id="seconds">5</span> seconds

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.