Discussion :

[spip93]

Bonjour à tous et à toutes,

A la demande de plusieurs clients, j'ai fait en sorte qu'une popup, à propos du pass sanitaire, s'affiche après le chargement de la page.
N'ayant pas la main sur le HTML, j'ai fait ça en jQuery.
Pour faire court, je crée une div que j'insère dans le body et que j'affiche en position absolue grâce au CSS.
Pour masquer cette div, j'ai un bouton et le bout de script suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$('.popup-close').click(function(){
        $('#popup-pass-sanitaire').hide();
});

Le problème que j'ai, c'est que cette popup s'affiche après le chargement de chaque page, puisque mon script commence par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(document).ready(function(){

Par conséquent, ça nuit gravement à l'UX

Comment faire pour que quand l'utilisateur clique sur le bouton pour fermer la popup, ça masque la popup pendant une certaine durée (24h par exemple) ou pendant la durée de la session ?

Je vous remercie par avance pour votre aide

Bonne journée

[jreaux62]

Bonjour,

Ben,... comme tu l'as dit...

• soit avec une variable de SESSION (PHP)
• soit avec un COOKIE (JS ou PHP)

[spip93]

Merci jreaux62. Comment je peux créer un cookie en JS ?
Je sais qu'on a une bannière pour les cookies et dont le code JS est le suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
/*
 * Gestion Bannière de cookies
 */
if (document.cookie.indexOf('allow_cookie') == -1) {
    if (sessionStorage.getItem("allow_cookie") == null) {            
        $.ajax({
            url: "//"+ window.location.host +"/cookie/index",
            type: "POST",
            datatype:"html",
            success: function(result) {
                document.getElementById('allow-cookie-bar').innerHTML = result;
                sessionStorage.setItem("allow_cookie", result); //stocke côté client le temps d'une session
                cookieBannerClose();
            }
        });
    } else {
        document.getElementById('allow-cookie-bar').innerHTML = sessionStorage.getItem("allow_cookie");
        cookieBannerClose();
    }
}
 
function cookieBannerClose(){
    $('#bc-close').click(function(){
        $('#allow-cookie-bar').slideUp(); 
        setCookie('allow_cookie', 'close', 30);
    }); 
}
 
/*
* Gestion cookies
*/
function setCookie(name,value,days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}
 
function getCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

Est-ce que je peux l'utiliser ? Si oui, comment ?

[jreaux62]

Bonjour,

avec un minimum de recherche, on trouve :

• document.cookie
• Window.sessionStorage
• ...

[spip93]

Merci jreaux62 , je vais regarder ça et essayer de le mettre à ma sauce.

Bonne journée