Masquer un élément pendant une certaine durée ou une session

Version imprimable

09/11/2021, 22h12
spip93

Masquer un élément pendant une certaine durée ou une session
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:

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:

$(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 ;)
09/11/2021, 23h16
jreaux62
Bonjour,

Ben,... comme tu l'as dit...
- soit avec une variable de SESSION (PHP)
- soit avec un COOKIE (JS ou PHP)

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:

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 ?

10/11/2021, 13h29
jreaux62
Bonjour,

avec un minimum de recherche, on trouve :
10/11/2021, 20h16
spip93

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

Bonne journée ;)