Exit Intent Popup — Mouse-Leave Offer HTML CSS JS

An exit-intent popup is the conversion tactic that catches a visitor in the act of leaving — the moment their cursor races toward the browser's close button or back arrow — and offers one last reason to stay: a discount code, a lead-magnet download, or a newsletter signup. This snippet builds the complete pattern in plain HTML, CSS, and vanilla JavaScript: exit detection, a discount modal with email capture and validation, a success state, and the fire-once discipline that keeps it from becoming an annoyance.

How exit-intent detection actually works

The trigger is a single mouseout listener on document. When the pointer leaves through the *top* of the viewport — e.clientY <= 0 with no relatedTarget (meaning it exited the window rather than moving onto another element) — the user is reaching for the tab bar, the URL bar, or the close button, which is the strongest available signal of an imminent exit. Checking the top edge specifically (rather than any edge) avoids false fires when someone's cursor merely drifts to a side scrollbar or off the bottom. This is a desktop-only signal by nature; there's no cursor on touch devices, so mobile needs a different trigger (covered in the FAQs).

Fire exactly once, then stay quiet

Nothing erodes trust faster than a popup that reappears every time the mouse twitches toward the top of the screen. Two flags enforce restraint: shown prevents a second appearance in the same page view, and armed is cleared the instant it fires or is dismissed. A production build extends this with sessionStorage (or a cookie with a multi-day expiry) so the popup doesn't fire again on the next page load or the visitor's next session — the commented hook is right there in openPopup(). The goal is one well-timed ask, not a recurring interruption.

Email capture with real validation

The offer is gated behind an email field so the discount becomes a lead, not just a giveaway. Submitting validates the address against a pragmatic regex (catching the common typos without claiming full RFC compliance), shows an inline error for an invalid entry, and on success swaps the form for a confirmation state showing the actual code (WELCOME15) before auto-closing. In a real build, the submit handler is where you'd POST the email to your ESP and tag the lead with the offer source.

The decline link matters

Beneath the form sits a deliberately plain "No thanks, I'll pay full price" link. A negative-framing decline (sometimes called a "confirm-shaming" opt-out, used tastefully here) gives the user a clear, friction-free way out — which both respects their choice and, research consistently shows, slightly increases conversion by making the value of the offer explicit at the moment of refusal. It routes through the same closePopup() as the ✕ button, the backdrop click, and the Escape key, so every dismissal path is consistent.

Smooth, accessible presentation

The modal is role="dialog" with aria-modal="true", animates in with opacity and transform only (a slight scale-and-rise, never height), and dims the page behind a backdrop — keeping it crash-safe across every framework export and giving keyboard users an Escape route.