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!
Top comments (4)
Works great, thanks for posting!
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 :)
How can I set up a session for the popup? I need to display only once per session
Hi there! I would recommend looking into session storage for that use case.
This page might help: bitsofco.de/an-overview-of-client-...