Simple popup onload avec delay avant fermeture

Cette fois ci nous allons créer une popup au chargement du site style lightbox mais sans utilisation d’une bibliothèque externe.

voir l’exemple

Pour cela nous faut :

  1. styliser  un fond avec une légère opacité qui passera devant le site
  2. styliser notre div popup par dessus ce fond
  3. ajouter un bouton de fermeture
  4. programmer l’ouverture de la popup au chargement du site
  5. programmer la fermeture du tout au bout d’un certain temps
  6. et une variante pour aussi programmer l’ouverture de la popup

Le fond opaque

Commençons par placer notre  fond qui prendra toute la hauteur et largeur de l’écran avec en background une image légèrement opaque.

body {
    margin:0;
    padding:0;
}
#fond {
    background-image: url(images/back.png);
    display: none; // par défaut lors du chargement du site le fond opaque n'est pas visible
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 0;
}

La popup

Nous allons styliser la div popup qui va se placer par dessus tous les éléments du site :

#popup {
    width: 350px;
    background-color: white;
    padding: 0 20px 20px;
    height: auto;
    z-index: 9;
    position: fixed;
    display: none; // par défaut lors du chargement du site la popup n'est pas visible
    top: 200px;
    right: 0px;
    left: 0;
    margin: 0 auto;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 4px #48312B solid;
}

Le bouton de fermeture

#close {
    width: 30px;
    height: 30px;
    position: relative;
    top: -10px;
    right: -350px;
    background-color: #000;
    color: white;
    line-height: 30px;
    text-align: center;
    font-size: 20px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}

et dans le body nous plaçons nos  éléments précédemment stylisés :

<body>
<div id="fond"></div>
<div id="popup">
 <div id="close"></div>
</div>
</body>

Rendre le tout visible au chargement du site

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
   $("#fond,#popup").css({"display":"block"}); // on affiche les div
   $("#fond,#close").click(function(){
	$("#fond,#popup").css({"display":"none"}); // si l'utilisateur clique sur le fond opaque ou le bouton, on ferme le tout
   });
});
</script>

Programmer la fermeture avec setTimeout

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
   $("#fond,#popup").css({"display":"block"}); // on affiche les div
   $("#fond,#close").click(function(){
	$("#fond,#popup").css({"display":"none"}); // si l'utilisateur clique sur le fond opaque ou le bouton, on ferme le tout
   });
   setTimeout(function(){
              $("#fond,#popup").css({"display":"none"});
           }, 5000); // temps en milliseconde avant fermeture
});
</script>

Variante : programmer aussi l’ouverture avec setTimeout

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
  setTimeout(
   function(){
	 $("#fond,#popup").css({"display":"block"}); // on affiche les div
	 $("#fond,#close").click(function(){
	  $("#fond,#popup").css({"display":"none"}); // si l'utilisateur clique sur le fond opaque ou le bouton, on ferme le tout
	 });
	 setTimeout(function(){
				$("#fond,#popup").css({"display":"none"});
			 }, 5000);

}, 5000);
</script>
[Total : 3    Moyenne : 4/5]

A propos jeanluc

Check Also

jQuery loader

Nous allons voir comment réaliser un plug-in loader (chargement) de page avec JavaScript et notamment ...

3 Commentaires

  1. Merci c’est parfait !

    Avez-vous une astuce aussi pour que le popup, une fois fermé ne s’ouvre plus au rechargement de la page ?

    Merci encore

  2. je te remercie pou le tuto , très bon travail!

  3. Bonjour,
    merci pour ce tuto bien sympa, auriez vous une idée pour pouvoir réouvrir la popup en cliquant sur un lien ? pour pouvoir ré afficher si l’info.
    Merci

Laisser un commentaire

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