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’exemplePour cela nous faut :
- styliser un fond avec une légère opacité qui passera devant le site
- styliser notre div popup par dessus ce fond
- ajouter un bouton de fermeture
- programmer l’ouverture de la popup au chargement du site
- programmer la fermeture du tout au bout d’un certain temps
- 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="https://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="https://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="https://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>
Click to rate this post!
[Total: 3 Average: 4]
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
je te remercie pou le tuto , très bon travail!
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