How to create an exit intent pop-up window

Do you know those annoying pop-up windows that appear when you try to close the browser window?

They somehow know that you want to close it, as if they can read your thoughts.

In fact, this is a very simple concept, you have to listen to specific DOM events.

I certainly don't recommend using pop-up windows because I find them annoying, but your company may require you to implement pop-up windows, so here we are.

I want to keep it simple, so here is HTML

<!doctype html>
<head>
  <title>Popup page</title>
</head>
<body>
  <div id="popup">
    <h3>Popup!</h3>
  </div>
</body>

Add this CSS:

body {
  font-family: system-ui;
  background-color: #f6d198;
}

#popup { position: fixed; width: 100%; visibility: hidden; z-index: 10002; top: 0; opacity: 0; transform: scale(0.5); transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s; position: relative; margin: 0 auto; text-align: center; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); width: 60%; background: #862a5c; padding-bottom: 100px; padding-top: 50px; color: #fff; font-size: 2rem; }

And this JavaScript:

const show = () => {
  const element = document.querySelector("#popup")
  element.style.visibility = "visible"
  element.style.opacity = "1"
  element.style.transform = "scale(1)"
  element.style.transition = "0.4s, opacity 0.4s"
}

document.addEventListener(“DOMContentLoaded”, () => { document.addEventListener(“mouseout”, (event) => { if (!event.toElement && !event.relatedTarget) { setTimeout(() => { show() }, 1000) } }) })

View in Codepen:

Look at the penQuit intent pop-up window, easy to implementBy Flavio Copes (@flaviocopes) InCipher pen.

Tech Wiki Online!