Hide div permanently once closed regardless of page reload

Question

I am after some help if at all possible.

I would like it so that once someone has clicked the X it wont re show the parent div when the page is reloaded or the user navigates to another page with the same popup.

I have the code below for where I started and hope I am only a little off!

Thanks in advance for any help :)

  $(".banner-cta-close").click(function() {
    $("body").addClass("header-banner-hide");
  }); 



  $(document).ready(function() {
    if (sessionStorage["PopupShown"] != 'yes') {
      ShowDialog(true);
      e.preventDefault();
    }
  });

$("#btnClose").click(function(e) {
  HideDialog();
  e.preventDefault();
  sessionStorage["PopupShown"] = 'yes'; //Save in the sessionStorage if the modal has been shown
});

function ShowDialog(modal) {
  $('#div_with_text').hide(); // this or use css to hide the div
  $('#div_with_text').delay(5000).slideDown('slow');

  if (modal) {
    $("#div_with_text").unbind("click");
  } else {
    $("#div_with_text").click(function(e) {
      HideDialog();
    });
  }
}

function HideDialog() {
  $("#div_with_text").hide();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div_with_text">
  <div class="container">text
    <div class="bannerbuttonhover" style="background: #2f358f;
    color: #fff;
    padding: 6px 12px;
    display: inline-block;
    margin-left: 20px;
    border-radius: 2px;
cursor: pointer;">Sign Up now</div>

    <div class="banner-cta-close">X</div>

  </div>

</div>

try localStorage instead if session storage doesn't work.. `localStorage.setItem(name)`, `localStorage.getItem(name)` — The Bomb Squad, Feb 03 '21 at 12:52

score 0 · Accepted Answer · answered Feb 03 '21 at 12:55

If you have an App Server, you could send a message back to the server to tell the server not send the code for the dialog on reload. But if not, you could use localStorage (shown here)

  $(document).ready(function() {
    if (!window.localStorage || !window.localStorage.getItem('NoPopup')) {
      ShowDialog(true);
      e.preventDefault();
    }
  });

$("#btnClose").click(function(e) {
  HideDialog();
  e.preventDefault();
  if (window.localStorage) window.localStorage.setItem("NoPopup","true");
});

score 0 · Answer 2 · answered Feb 03 '21 at 13:02

As @ControlAltDel mentioned , you can avoid sending its code from the server. Otherwise, If you want to do it in the front-end you can simply use cookies ... You can find how to do it with javascript in here. Depending on the cookie value, you can either show this div or not.

Hide div permanently once closed regardless of page reload

2 Answers2