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

27/04/2014 Mis à jour le 19/12/2018 Par Copier coller | Dans jQuery