Cacher un élément [Résolu]

Signaler
Messages postés
77
Date d'inscription
mercredi 4 septembre 2019
Statut
Membre
Dernière intervention
10 avril 2021
 -
Messages postés
32054
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
11 avril 2021
 -
Bonjour, sur ma page web (en cours de réalisation), j'aimerai que la barre cookie disparaisse lorsque l'utilisateur appuie sur le bouton "accepter". Après de nombreuses recherches, je ne trouve pas la réponse à ma question. Pouvez-vous m'aider ?

Le code de barre cookie 
<center><div  id="cookie-law-info-bar" style="display: block; background-color: rgb(32, 35, 202); color: rgb(231, 18, 18); font-family: inherit; bottom: 10px; position: fixed;">
    <span>Nous tâchons de préserver votre vie privé. Nous collectons des cookies en vue de prochaines améliorations du site web.  <a href="#" id="cookie_action_close_header" class="medium cli-plugin-button cli-plugin-main-button" style="color: rgb(255, 255, 255); background-color: rgb(51, 51, 51);">Accepter</a> <a href="Politique de confidentialité .html" id="CONSTANT_OPEN_URL" class="cli-plugin-main-link" style="color: rgb(255, 255, 255);">
En savoir plus
</a>
</span></div>
</center>


EDIT : Ajout des balises de code

2 réponses

Réponse 1 / 2
Messages postés
32054
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
11 avril 2021
 3 391
Bonjour,

Ton javascript doit cibler l'élément dont l'id est : cookie-law-info-bar
https://developer.mozilla.org/fr/docs/Web/api/Document/getElementById
et jouer sur sa propriété style display ( en la mettant à none pour masquer )
https://www.w3schools.com/jsref/prop_style_display.asp

Bien entendu, si tu veux que la barre reste ensuite cachée même si il recharge la page, il faut stocker l'info dans un cookie ou dans le local storage...
Et faire un second script JS qui ira vérifier si la valeur existe ( dans le cookie ou le local storage) et masquer la barre à nouveau

NB: La nouvelle norme ( la RGPD) concernant l'utilisation des cookies impose certaines choses. comme le fait d'informer sur les cookies utilisés, la durée de conservation des données.. la possibilité à tout moment pour l'utilisateur de venir modifier son choix...
La simple barre "accepter" n'est plus suffisante...


Réponse 2 / 2
Messages postés
77
Date d'inscription
mercredi 4 septembre 2019
Statut
Membre
Dernière intervention
10 avril 2021
 8
Bonjour, merci pour ta réponse.
Voilà ce que j'ai mis
le code de la barre info
<center><div id="cookie-law-info-bar" style="display: block; background-color: rgb(59, 117, 47); color: rgb(172, 142, 142); font-family: inherit; bottom: 10px; position: fixed;"><span>Nous tâchons de préserver votre vie privé. Nous collectons des cookies en vue de prochaines améliorations du site web. <a href="#" id="cookie_action_close_header" onclick="fermerpopup()" class="medium cli-plugin-button cli-plugin-main-button" style="color: rgb(255, 255, 255); background-color: rgb(51, 51, 51);">Accepter</a> <a href="Rubriques d'aides/Politique de confidentialité.html" id="CONSTANT_OPEN_URL" class="cli-plugin-main-link" style="color: rgb(255, 255, 255);">En savoir plus</a></span></div></center>

le code java
<script type="text/javascript">

function fermerpopup(){
document.getElementById(cookie-law-info-bar).style.display = none;

}


</script>
Il doit manquer quelque chose car ça ne fonctionne pas
Signaler
Messages postés
32054
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
11 avril 2021
 3 391
Pour commencer, merci de poster ton code correctement sur le forum.
Pour cela, tu dois utiliser les balises de code.
Explications à lire entièrement !! disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Ensuite, oui, il manque quelque-chose.....
Des "quotes" autour de ton id dans ta ligne 
document.getElementById(cookie-law-info-bar).style.display = none;

A corriger par 
document.getElementById("cookie-law-info-bar").style.display = none;



Retire également le 
 href="#"
de ton bouton fermer.
Répondre Posez votre question