繁体   English   中英

带有 php cookie 的退出意图弹出窗口

[英]Exit intent popup with php cookie

目标:在我的退出意图弹出代码中实施 1 天的 php cookie。

我找到了弹出窗口的工作方式,以及 php cookie 的可能解决方案。 我在 php 中很新,但很难将所有东西拼凑在一起。 我不使用 jQuery 之类的依赖项,但包含 javascript 的一些行。

  1. 下面是 cookie 的正确方法吗?
  2. 有没有办法获得相同结果的 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, 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, 255, 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, 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。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM