带有 cookie 的 Javascript 覆盖弹出窗口

Question

I'm looking for some advice. I'm trying to create an overlay on an html website with a pop up before a user can proceed to the site.

So far I've managed to create a cookie:

function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
  var expires = "expires=" + d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

With the overlay calling the cookie function after the user clicked Accept

$(function () {
  var overlay = $('<div id="overlay"></div>');
  overlay.show();
  overlay.appendTo(document.body);
  $(".popup").show();
  $(".popupCloseButton").click(function () {
    $(".popup").hide();
    overlay.appendTo(document.body).remove();
    return false;
  });

  $(".x").click(function () {
    $(".popup").hide();
    overlay.appendTo(document.body).remove();
    return false;
  });
  $(".popupAcceptButton").click(function () {
    setCookie("test", "test", 30);
    $(".popup").hide();
    overlay.appendTo(document.body).remove();
    return false;
  });

  $(".x").click(function () {
    $(".popup").hide();
    overlay.appendTo(document.body).remove();
    return false;
  });
});

The popup:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='popup'>
    <div class='cnt223'>
        <!--<div class="popupCloseButton">&times;</div>-->
        <h1 style="font-size: 18px;">Mholweni, Hello, Goeie dag!</h1>
        <p style="font-size: 14px;">We respect your rights. Please read our Usage Agreement <a href="https://www.saonline.africa/use.html" target="_blank" style="color: #1b305c !important; font-weight: 300;"><u>HERE</u></a>.</p>
        <div class="popupAcceptButton"><font style="font-size: 15px;">I ACCEPT AND WANT TO PROCEED</font></div>
    </div>
</div>

What I'm struggling with is a sort of if else statement to check if the cookie exist, if it does, not to show the popup again.

Answer 1

https://stackoverflow.com/a/5968306/14678078

You just have to read from the cookies in the browser, and only call overlay.show() if the cookie doesn't exist, this answer is a perfect example.