popup / banner - on click disappears banner and if the user reloads the page does not see banner if until closing and reopening browers

Question

my name is Andrea can you help me please? I have a banner that I show with some text and if the user clicks it it closes but the problem is:

if I reload the page the banner reappears and does not remain closed as clicked on the X button

window.onload = function(){
    document.getElementById('close').onclick = function(){
        this.parentNode.parentNode.parentNode
        .removeChild(this.parentNode.parentNode);
        return false;
    };
};

<div class="card-body">
  <button id="close"><h4>X</h4></button>
  <p class="card-title text-white">configurazione di Seo Tools Manager</p>
</div>

Hello Andrea, welcome to Stack Overflow! Before asking a question, please make sure to do some basic research and try to generalize your question a bit. I think your question is how to make a web page memorize things across reloads. Please look up "cookies": https://stackoverflow.com/questions/14573223/set-cookie-and-get-cookie-with-javascript — Bernhard Stadler, Apr 29 '20 at 19:05

score 0 · Accepted Answer · answered Apr 29 '20 at 19:01

0

The browser doesn't automatically remember if a user closed the banner. You have to use, for example, localStorage to save that action in the user's browser so, when the page is reloaded, the browser "remembers" that that user closed the banner in the past.

Read more here

window.onload = function() {

  var popup = document.querySelector('.card-body');
  // Check if the user has previously closed the banner and display/hide it accordingly
  if (!localStorage.getItem('closedBanner')) {
    popup.style.display = "block";
  } else {
    popup.style.display = "none";
  }

  document.getElementById('close').onclick = function() {
    // Save into the user's browser that the popup was closed
    localStorage.setItem('closedBanner', "true");

    this.parentNode.parentNode.parentNode
      .removeChild(this.parentNode.parentNode);
    return false;
  };
};

<div class="card-body">
  <button id="close"><h4>X</h4></button>
  <p class="card-title text-white">configurazione di Seo Tools Manager</p>
</div>

answered Apr 29 '20 at 19:01

ajmnz

742
7
19

Hi ajmnz, thank you for your time and help .. thanks again – Andrea Ferro Apr 30 '20 at 09:12
ok if instead I had more banners with the same style but with a different ID like this? if I set the javascript above it works and the banner closes but then I close all the other 4 too .. there is a way to remember 4 different banners – Andrea Ferro Apr 30 '20 at 11:32
X
– Andrea Ferro Apr 30 '20 at 11:33
X
– Andrea Ferro Apr 30 '20 at 11:34
X
– Andrea Ferro Apr 30 '20 at 11:34
– Andrea Ferro Apr 30 '20 at 11:35
only the different banner changes but then the class is the same as you could do to remember the 4 different banners but with the same class – Andrea Ferro Apr 30 '20 at 11:35
You would just need to store different values for each banner. Something like `closedBanner1`, `closedBanner2`, and so on. Just repeat the process for each banner and change the item name (`closedBanner`) for something different. Got it? – ajmnz Apr 30 '20 at 22:19
hello, thanks for your answer I ask you something .. I used "closedBanner2" closedBanner1 ... but the banner always has the .card-body CLASS and if I click to close not so xk – Andrea Ferro May 07 '20 at 09:52
the banner is html it is the same as the one above it changes only the text I show but the class and action is the same instead the javascript I used your code and it works but if I close the 1 banner it disappears but if I close the banner 2,3 ... copy to the page reload – Andrea Ferro May 07 '20 at 09:53
Could you provide some code or the link to the website? JSFiddle will do – ajmnz May 07 '20 at 17:42

popup / banner - on click disappears banner and if the user reloads the page does not see banner if until closing and reopening browers

1 Answers1

X

X

X