1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Modales & Capas conversionmodaloverlay

Exit Intent Popup

Modal inteligente que se activa al detectar intención de salida del usuario de la página.

Wait! Before you go...

Get 20% off your first order when you join our mailing list.

Uso

Copia y pega este código directamente en tu página de Astro:

astro 
---
import { ExitIntentPopup } from 'astro-component-kit';
---

<ExitIntentOverlay>Content</ExitIntentOverlay>
--- import { ExitIntentPopup } from 'astro-component-kit'; --- <ExitIntentOverlay>Content</ExitIntentOverlay>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/ExitIntentPopup.astro:

astro 
---
---
<div class="exit-modal">
  <div class="exit-card">
    <h2>Wait! Before you go...</h2>
    <p>Get 20% off your first order when you join our mailing list.</p>
    <input type="email" placeholder="Your email" />
    <button>Get My Code</button>
  </div>
</div>
<style>
  .exit-modal { position: fixed; inset: 0; background: rgba(99,102,241,0.1); backdrop-filter: blur(15px); z-index: 6000; display: grid; place-items: center; }
  .exit-card { background: #fff; color: #000; padding: 3rem; border-radius: 30px; text-align: center; max-width: 450px; box-shadow: 0 20px 60px rgba(0,0,0,0.1); }
  h2 { font-weight: 900; font-size: 1.8rem; margin-bottom: 1rem; }
  p { color: #64748b; margin-bottom: 2rem; line-height: 1.5; }
  input { width: 100%; padding: 1rem; border: 1px solid #eee; border-radius: 12px; margin-bottom: 1rem; outline: none; font-size: 1rem; }
  button { width: 100%; padding: 1rem; background: #6366f1; color: #fff; border: none; border-radius: 12px; font-weight: 800; cursor: pointer; transition: 0.2s; }
  button:hover { background: #4f46e5; }
</style>
--- --- <div class="exit-modal"> <div class="exit-card"> <h2>Wait! Before you go...</h2> <p>Get 20% off your first order when you join our mailing list.</p> <input type="email" placeholder="Your email" /> <button>Get My Code</button> </div> </div> <style> .exit-modal { position: fixed; inset: 0; background: rgba(99,102,241,0.1); backdrop-filter: blur(15px); z-index: 6000; display: grid; place-items: center; } .exit-card { background: #fff; color: #000; padding: 3rem; border-radius: 30px; text-align: center; max-width: 450px; box-shadow: 0 20px 60px rgba(0,0,0,0.1); } h2 { font-weight: 900; font-size: 1.8rem; margin-bottom: 1rem; } p { color: #64748b; margin-bottom: 2rem; line-height: 1.5; } input { width: 100%; padding: 1rem; border: 1px solid #eee; border-radius: 12px; margin-bottom: 1rem; outline: none; font-size: 1rem; } button { width: 100%; padding: 1rem; background: #6366f1; color: #fff; border: none; border-radius: 12px; font-weight: 800; cursor: pointer; transition: 0.2s; } button:hover { background: #4f46e5; } </style>

Información Rápida

Categoría
Modales & Capas
Nombre de archivo
ExitIntentPopup.astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
conversionmodaloverlay