¿Te vas ya?
Te guardamos el carrito durante 48 horas.
Te lo hemos enviado
Revisa tu correo para volver al carrito.
Modale d'intention de sortie
Quand le curseur approche du bord supérieur une ligne s'allume, et s'il sort, une modale descend pour proposer de garder le panier.
Réglages
Code
<div class="uvq13-ext"><div class="ez" aria-hidden="true"><span>Sors le curseur par le haut</span></div><header class="nv"><b>Brisa</b><span class="ct"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 8h12l-1 12H7zM9 8V6.5a3 3 0 0 1 6 0V8"/></svg><i>2</i></span></header><div class="gr" aria-hidden="true"><span><i class="p"></i><i></i><i class="s"></i></span><span><i class="p"></i><i></i><i class="s"></i></span><span><i class="p"></i><i></i><i class="s"></i></span></div><button type="button" class="fire" aria-haspopup="dialog">Simuler une sortie</button><div class="scr"></div><div class="dl" role="dialog" aria-modal="true" aria-labelledby="uvq13-ext-t"><button type="button" class="x" aria-label="Fermer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button><div class="v1"><p class="ti" id="uvq13-ext-t">Tu pars déjà ?</p><p class="ds">On te garde le panier pendant 48 heures.</p><div class="its" aria-hidden="true"><i style="--c:#fb923c"></i><i style="--c:#38bdf8"></i></div><form class="fm"><input type="email" placeholder="toi@mail.fr" aria-label="E-mail" autocomplete="email"><button type="submit">Garde-le-moi</button></form><button type="button" class="no">Non, merci</button></div><div class="v2" aria-live="polite"><span class="ok"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7l8 6 8-6M4 6.5h16v11H4z"/></svg></span><p class="ti">On te l'a envoyé</p><p class="ds">Consulte tes e-mails pour revenir au panier.</p></div></div></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Overlays
Voir tout : OverlaysOù l’utiliser
Les popups de sortie ressemblent souvent à une embuscade, celle-ci montre donc son déclencheur. Une fine ligne en haut brille davantage à mesure que le pointeur approche, et sortir par ce bord fait descendre une modale chaleureuse qui propose de garder le panier 48 heures par e-mail, avec un non merci bien visible. Pour une boutique, une inscription ou une réservation.
La couleur principale est le bord lumineux, la pastille et le bouton, la seconde le papier de la modale. Elle attend quelques secondes avant de pouvoir revenir, et sur écran tactile ou au clavier le bouton de simulation l'ouvre de la même façon.