简体   繁体   中英

Exit intent popup with php cookie

Goal: To implement into my exit intent popup code a php cookie for 1 day.

I have found a working way for the popup, and a possible solution for the php cookie. I am very new in php though and having a hard time to piece everything together. I don't use dependencies like jQuery but embrace some lines of javascript.

  1. Is the below the right way for the cookie?
  2. Is there a way for a SLIMMER code (js, css, php) with the same result?

 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 ""? }?>

The answer is already posted in the snippet. Thanks to the @CBroe.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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