时间戳

首页 > 解决方案 > popup / banner - on click disappears banner and if the user reloads the page does not see banner if until closing and reopening browers

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

问题描述

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>

标签： javascripthtml

解决方案

浏览器不会自动记住用户是否关闭了横幅。例如，您必须使用localStorage将该操作保存在用户的浏览器中，以便在重新加载页面时，浏览器“记住”该用户过去关闭了横幅。

在这里阅读更多

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>

推荐阅读