<div class="exit-overlay" id="exitPopup">
<div class="exit-modal">
<button class="close-popup" id="closeExit">×</button>
<h2>Wait! Don't leave yet.</h2>
<p>Get 20% off your first order if you sign up now.</p>
<button class="claim-btn">Claim Discount</button>
</div>
</div>
<p style="text-align:center; padding: 50px;">Move your mouse out of the window (top) to trigger the popup.</p>
.exit-overlay {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.exit-overlay.visible {
opacity: 1;
pointer-events: auto;
}
.exit-modal {
background: #fff;
padding: 40px;
border-radius: 16px;
text-align: center;
max-width: 400px;
position: relative;
transform: translateY(20px);
transition: transform 0.3s;
}
.exit-overlay.visible .exit-modal {
transform: translateY(0);
}
.exit-modal h2 {
margin-top: 0;
color: #1f2937;
}
.exit-modal p {
color: #6b7280;
margin-bottom: 25px;
}
.claim-btn {
background: #ef4444;
color: white;
border: none;
padding: 12px 30px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
font-size: 1rem;
}
.close-popup {
position: absolute;
top: 10px;
right: 15px;
font-size: 1.5rem;
background: none;
border: none;
cursor: pointer;
color: #9ca3af;
}
const popup = document.getElementById("exitPopup");
const closeBtn = document.getElementById("closeExit");
let hasShown = false;
document.addEventListener("mouseleave", (e) => {
if (e.clientY < 0 && !hasShown) {
popup.classList.add("visible");
hasShown = true;
}
});
closeBtn.addEventListener("click", () => {
popup.classList.remove("visible");
});
