时间戳

首页 > 解决方案 > 带有 cookie 的 Javascript 覆盖弹出窗口

javascript - 带有 cookie 的 Javascript 覆盖弹出窗口

问题描述

我正在寻求一些建议。我正在尝试在用户可以继续访问该网站之前在 html 网站上创建一个带有弹出窗口的叠加层。

在此处输入图像描述

到目前为止，我已经设法创建了一个 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=/";
}

用户点击接受后覆盖层调用 cookie 函数

$(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;
  });
});

弹出窗口：

<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>

我正在努力使用一种 if else 语句来检查 cookie 是否存在，如果存在，则不再显示弹出窗口。

标签： javascripthtmlcookiesoverlayjscript

解决方案

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

您只需从浏览器中的 cookie 中读取，并且仅在 cookie 不存在时调用 overlay.show()，这个答案就是一个完美的例子。

推荐阅读