Exit-Intent Modal

Overlay triggered when the visitor moves to leave.

html

<div class="exit-backdrop">
  <div class="exit-modal exit-modal--standard" role="dialog" aria-modal="true" aria-labelledby="exit-title">
    <button type="button" class="exit-modal__close" aria-label="Close dialog">&times;</button>
    <h2 id="exit-title" class="exit-modal__headline">Before you go...</h2>
    <p class="exit-modal__offer">Take 15% off your first order with code STAY15.</p>
    <button type="button" class="exit-modal__cta" style="background:#241430;">Claim offer</button>
    <a href="#" class="exit-modal__dismiss">No thanks</a>
  </div>
</div>
<style>
.exit-backdrop { background: #24143099; padding: 40px 20px; display: flex; justify-content: center; border-radius: 12px; }
.exit-modal { background: #FAF7F2; border-radius: 16px; padding: 28px; text-align: center; font: 16px/1.5 system-ui, sans-serif; color: #241430; box-shadow: 0 20px 48px rgba(0,0,0,.3); }
.exit-modal--compact { width: 240px; padding: 20px; }
.exit-modal--standard { width: 340px; }
.exit-modal--large { width: 460px; padding: 36px; }
.exit-modal__close { position: absolute; margin: -24px 0 0 calc(100% - 22px); background: none; border: none; font-size: 20px; cursor: pointer; color: #241430aa; }
.exit-modal__close:hover, .exit-modal__close:focus-visible { color: #241430; }
.exit-modal__headline { margin: 0 0 10px; font-size: 22px; font-weight: 800; }
.exit-modal__offer { margin: 0 0 20px; color: #241430cc; }
.exit-modal__cta { display: block; width: 100%; border: none; color: #FAF7F2; padding: 12px; border-radius: 10px; font-weight: 700; cursor: pointer; }
.exit-modal__cta:hover, .exit-modal__cta:focus-visible { opacity: .9; }
.exit-modal__dismiss { display: inline-block; margin-top: 14px; font-size: 13px; color: #241430aa; text-decoration: underline; }
</style>

tailwind

<div class="bg-[#24143099] p-10 flex justify-center rounded-xl">
  <div class="exit-tw exit-tw--standard bg-[#FAF7F2] rounded-2xl p-7 text-center font-sans text-[#241430] shadow-2xl relative" role="dialog" aria-modal="true" aria-labelledby="exit-tw-title">
    <button type="button" class="absolute top-2 right-2 bg-transparent border-0 text-xl cursor-pointer text-[#241430]/65 hover:text-[#241430]" aria-label="Close dialog">&times;</button>
    <h2 id="exit-tw-title" class="m-0 mb-2.5 text-xl font-extrabold">Before you go...</h2>
    <p class="m-0 mb-5 text-[#241430]/80">Take 15% off your first order with code STAY15.</p>
    <button type="button" class="block w-full border-0 text-[#FAF7F2] p-3 rounded-lg font-bold cursor-pointer hover:opacity-90" style="background:#241430;">Claim offer</button>
    <a href="#" class="inline-block mt-3.5 text-[13px] text-[#241430]/65 underline">No thanks</a>
  </div>
</div>
<style>
.exit-tw--compact { width: 240px; padding: 20px; }
.exit-tw--standard { width: 340px; }
.exit-tw--large { width: 460px; padding: 36px; }
</style>

react

export function ExitIntentModal({
  headline = "Before you go...",
  offer = "Take 15% off your first order with code STAY15.",
  size = "standard",
  accent = "#241430",
  showDismiss = true,
}) {
  const width = { compact: 240, standard: 340, large: 460 }[size] ?? 340;
  return (
    <div style={{ background: "#24143099", padding: "40px 20px", display: "flex", justifyContent: "center", borderRadius: 12 }}>
      <div role="dialog" aria-modal="true" aria-labelledby="exit-r-title" style={{ position: "relative", width,
        background: "#FAF7F2", borderRadius: 16, padding: size === "large" ? 36 : size === "compact" ? 20 : 28,
        textAlign: "center", font: "16px/1.5 system-ui, sans-serif", color: "#241430", boxShadow: "0 20px 48px rgba(0,0,0,.3)" }}>
        <button type="button" aria-label="Close dialog" style={{ position: "absolute", top: 8, right: 8, background: "none",
          border: "none", fontSize: 20, cursor: "pointer", color: "#241430aa" }}>&times;</button>
        <h2 id="exit-r-title" style={{ margin: "0 0 10px", fontSize: 22, fontWeight: 800 }}>{headline}</h2>
        <p style={{ margin: "0 0 20px", color: "#241430cc" }}>{offer}</p>
        <button type="button" style={{ display: "block", width: "100%", border: "none", color: "#FAF7F2", padding: 12,
          borderRadius: 10, fontWeight: 700, cursor: "pointer", background: accent }}>Claim offer</button>
        {showDismiss && <a href="#" style={{ display: "inline-block", marginTop: 14, fontSize: 13, color: "#241430aa", textDecoration: "underline" }}>No thanks</a>}
      </div>
    </div>
  );
}