使用 php cookie 退出意图弹出窗口

问题描述

目标：在我的退出意图弹出代码中实现 1 天的 PHP cookie。

我找到了弹出窗口的工作方式，以及 PHP cookie 的可能解决方案。虽然我对 PHP 很陌生，但很难将所有东西拼凑在一起。我不使用像 jQuery 这样的依赖项，而是使用了一些 javascript。

下面是 cookie 的正确方法吗？
有没有办法让 SLIMMER 代码（js、css、PHP）得到相同的结果？

const show = () => {
  const element = document.querySelector("#exit-intent");
  if (element) {
    element.style.visibility = "visible";
    element.style.opacity = "1";
    //element.style.transform = "scale(1)";
    //element.style.transition = "0.01s,opacity 0.01s";
  }
};
document.addEventListener("DOMContentLoaded",() => {
  document.addEventListener("mouSEOut",(event) => {
    if (!event.toElement && !event.relatedTarget) {
      setTimeout(() => {
        show();
      },20);
    }
  });
});

.exit-intent {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  background-color: rgba(255,255,.8);
  -webkit-backdrop-filter: saturate(300%) blur(7px);
  backdrop-filter: saturate(300%) blur(7px);
  z-index: 7;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto
}

.exit-intent:target {
  visibility: visible;
  opacity: 1;
}

.exit-intent-close {
  position: absolute;
  max-width: 500px;
  border-radius: 10px;
  background: rgba(255,0.9);
}

.exit-intent .close {
  position: absolute;
  right: 5px;
  top: 5px;
  padding: 5px;
  color: #000;
  line-height: 0.6em;
}

.exit-intent .close:hover {
  color: #999;
}

.close-exit-intent {
  background: rgba(0,0.7);
  cursor: default;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
}

.exit-intent:target+.close-exit-intent {
  opacity: 1;
  visibility: visible;
}

<?PHP
$cookie_name = "TSBCookie";
$cookie_value = "TSB";
setcookie($cookie_name,$cookie_value,time() + (86400 * 1),"/"); // 86400 = 1 day

if(!isset($_COOKIE[$cookie_name])) {
echo "

<div id='exit-intent' class='exit-intent'>

<a href='/' class='close'>&times;</a>

<h2>Pop</h2>

</div>

<a href='/' class='close-exit-intent'></a>

";} else {
echo "";
}?>

解决方法

答案已经发布在片段中。感谢@CBroe。

html javascript