DEV Community

loading...
Cover image for Building an Exit Popup with JavaScript

Building an Exit Popup with JavaScript

deammer profile image Maxime ใƒปUpdated on ใƒป3 min read

I recently built a system that shows a popup to users when they are about to exit a site. I thought I would share my approach and a couple of tricks I've learned along the way. I'm going to stick with vanilla JavaScript to make this as approachable as possible.

Disclaimer: exit popups can annoy users, so I recommend using them in moderation!

Markup and styling

Let's write some markup for our popup:

<div id="popup" class="popup__wrapper">
  <div class="popup__container">
    <h1 class="popup__title">Thank you for visiting!</h1>
    <p>Have a wonderful day ๐Ÿ’</p>
  </div>
</div>

The popup__wrapper is a transparent overlay that goes over the page. The popup__container will wrap the content we'd like to display.

Here's the CSS I used:

* {
  box-sizing: border-box;
}

#popup {
  display: none;
}

.popup__wrapper {
  background: rgba(0, 0, 0, .75);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 10;
}

.popup__container {
  background: #fff;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 18px;
  margin: 100px auto;
  max-width: 100%;
  padding: 20px;
  width: 500px;
}

.popup__title {
  font-size: 26px;
  margin-bottom: 15px;
}

The most important bit is the display: none on the #popup selector: this hides the content until we want to show it.

Adding functionality

Let's now write a few lines of JavaScript to show the popup when the mouse leaves the window:

function onMouseOut(event) {
  // Remove this event listener
  document.removeEventListener("mouseout", onMouseOut);

  // Show the popup
  document.getElementById("popup").style.display = "block";
}

document.addEventListener("mouseout", onMouseOut);

The popup should now show up when your mouse leaves the window!

Here's a CodePen for reference:

Refining the system

When users want to leave a site, they usually move their mouse to the URL bar or the Back button at the top of their browser. To make popups a little less eager, we could use that to our advantage:

function onMouseOut(event) {
  // If the mouse is near the top of the window, show the popup
  if (event.clientY < 50) {
    // Remove this event listener
    document.removeEventListener("mouseout", onMouseOut);

    // Show the popup
    document.getElementById("popup").style.display = "block";
  }
}

document.addEventListener("mouseout", onMouseOut);

Fixing a Firefox bug

I noticed that the popup shows up when clicking or hovering on a <select> element in Firefox.

You can test this by adding a dropdown to the DOM and clicking on it in Firefox:

<div id="popup" class="popup__wrapper">
  <div class="popup__container">
    <h1 class="popup__title">Thank you for visiting!</h1>
    <p>Have a wonderful day ๐Ÿ’</p>
  </div>
</div>

<select>
  <option>Oh</option>
  <option>No</option>
</select>

This is very annoying!

After a few hours of iterations, I came to a solution:

function onMouseOut(event) {
  // If the mouse is near the top of the window, show the popup
  // Also, do NOT trigger when hovering or clicking on selects
  if (
    event.clientY < 50 &&
    event.relatedTarget == null &&
    event.target.nodeName.toLowerCase() !== 'select') {
    // Remove this event listener
    document.removeEventListener("mouseout", onMouseOut);

    // Show the popup
    document.getElementById("popup").style.display = "block";
  }
}

document.addEventListener("mouseout", onMouseOut);

The popup now works as expected in Firefox! Here's another CodePen with the improvements:


I hope this post was informative! Please let me know what you think in the comments below, and happy coding!

Discussion (4)

pic
Editor guide
Collapse
gregrossi profile image
Greg Rossi

Works great, thanks for posting!

Collapse
panphora profile image
David Miranda

This was very useful, thank you! I think you might get the same issue in Firefox with INPUT elements โ€” you might want to fix that as well :)

Collapse
iambenjohn profile image
Ben

How can I set up a session for the popup? I need to display only once per session

Collapse
deammer profile image
Maxime Author

Hi there! I would recommend looking into session storage for that use case.

This page might help: bitsofco.de/an-overview-of-client-...