jQuery
Cookie et fenêtre modale
Fiche écrite en 2015 et relue en 2026 : l’encadré en fin de fiche signale ce qui a changé depuis.
Une fenêtre qui ne s’affiche qu’à la première visite : un message d’information, une offre. On mémorise sa fermeture dans un cookie, et on ne l’affiche plus tant que le cookie existe.
<div class="modal" id="popup" style="display:none">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<p>Enim sociis lectus a dignissim scelerisque nascetur ac, porttitor mid et tincidunt sit magna enim, scelerisque, elementum auctor augue pulvinar dignissim eu, parturient lectus hac elementum vel pellentesque tristique vel mus et adipiscing magnis lundium mus? Dignissim habitasse? Odio lectus. Pulvinar augue, et odio platea amet platea scelerisque? Pid augue.</p>
</div>
</div>
</div>
</div>
<div id="popup_bg" class="modal-backdrop fade in" style="display:none"></div>
$(document).ready(function (){
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toUTCString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function getCookie(name) {
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
}
else
{
begin += 2;
var end = document.cookie.indexOf(";", begin);
if (end == -1) {
end = dc.length;
}
}
return unescape(dc.substring(begin + prefix.length, end));
}
var myCookie = getCookie("popup");
if (myCookie == null) {
$("#popup").show();
$("#popup_bg").show();
}else{
$("#popup").hide();
$("#popup_bg").hide();
}
$("#popup .close").click(function(){
$("#popup").slideUp();
$("#popup_bg").hide();
createCookie('popup','popup',7)
});
});