Brisa2
HTML + CSSOverlays

Exit-Intent-Modal

Nähert sich der Cursor dem oberen Rand, leuchtet eine Linie auf, und verlässt er die Seite, fällt ein Modal herab, das den Warenkorb sichert.

Einstellungen

16px
1x

Code

<div class="uvq13-ext"><div class="ez" aria-hidden="true"><span>Fahr mit dem Zeiger oben hinaus</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">Verlassen simulieren</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="Schließen"><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">Schon weg?</p><p class="ds">Wir heben deinen Warenkorb 48 Stunden auf.</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="du@mail.de" aria-label="E-Mail" autocomplete="email"><button type="submit">Für mich sichern</button></form><button type="button" class="no">Nein, danke</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">Wir haben es dir geschickt</p><p class="ds">Sieh in deine E-Mails, um zum Warenkorb zurückzukehren.</p></div></div></div>

Prompt für KI

Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Overlays

Alle ansehen: Overlays

Wofür du ihn nutzen kannst

Exit-Intent-Popups wirken oft wie ein Hinterhalt, dieses zeigt deshalb seinen Auslöser. Eine dünne Linie oben leuchtet stärker, je näher der Zeiger kommt, und wer über diesen Rand hinausfährt, bekommt ein warmes Modal, das den Warenkorb 48 Stunden per E-Mail aufhebt, mit gut sichtbarem Nein danke. Falsche Adressen lassen das Feld wackeln, ein Gesendet-Zustand bestätigt. Passt zu Shops, Anmeldungen und Buchungen, bei denen Leute zögern.

Die Hauptfarbe ist der leuchtende Rand, das Abzeichen und der Button, die zweite das Papier des Modals. Es wartet ein paar Sekunden, bevor es wieder erscheinen darf, und auf Touchscreens oder per Tastatur öffnet der Simulieren-Button es genauso.