Modalks und Exit Panels

1) Wann was zu verwenden

Modal (Dialog mit dem Backdrop) - für kritische Entscheidungen und kurze Aufgaben, die volle Aufmerksamkeit erfordern: Handlungsbestätigung, rechtliche Zustimmungen, gefährliche Operationen, Kurzformulare ≤ 1-2 Felder. Blockiert den Hintergrund.
Drawer/Sheet (Exit Panel) - zur Kontexterweiterung: Objektdetails, Attributbearbeitung, Listenauswahl, Hilfsnavigation. Der Hintergrund ist sichtbar → der Kontext bleibt erhalten.

• Wenn die Aktion Konzentration und Bestätigung benötigt → Modal.
• Wenn Sie den Kontext speichern und einen „parallelen“ Überblick über → Drawer geben müssen.

2) Struktur und Größen

Modal

Titel (erforderlich) → Haupttext → CTA-Zone (Primary/Secondary/Destructive).
Abmessungen: S (480-560 px), M (640-720 px), L (≤ 840 px). Das Handy hat ein Vollbild-Blatt.

Drawer / Sheet

Richtung: rechter Rand (Desktop, Bearbeitung), unten (Mobile, Aktionen), manchmal links (Navigation).
Breite: 360-480 (S), 480-640 (M), 640-800 (L). Auf dem Handy: 90-100% der Breite/Höhe.

Die Höhe des Inhalts ist immer begrenzt, innen - Scrolling; Header/STA sind festgelegt.

3) Copywriting und CTA

Titel = Aktion/Bedeutung: „Wette bestätigen“, „Zahlungsmethode auswählen“, „KYC erforderlich“.
Der Text ist kurz, 1-2 Sätze. Vermeiden Sie vage Formeln.
CTA: ein Primary, neben Secondary („Cancel“) und gegebenenfalls Destructive.

Für riskante Handlungen fügen Sie eine Erklärung in 1 Zeile hinzu: "Die Handlung ist irreversibel. Sie können innerhalb von 10 Sekunden stornieren (falls verfügbar)"

4) Verhalten und Zustände

Öffnen: sofortige Reaktion ≤ 100 ms, dann Animation 120-180 ms.
Schließen: Schneller öffnen (80-140 ms), Fokus wieder auf Trigger.
Busy: 'aria-busy =' true' auf dem Container, Taste mit Wiederholungssperre.
Unsaved (schmutzige Form): beim Schließen - Dialog-Warnung („Es gibt nicht gespeicherte Änderungen“).
Escape/Klick auf den Hintergrund: zulässig für ungefährliche Dialoge; für kritische - nur explizite Tasten.

5) Verfügbarkeit (A11y)

Container: 'role =' dialog''und' aria-modal = 'true' (für ein echtes Modalka).
Der Titel ist über 'aria-labelledby' verknüpft; die Beschreibung lautet „aria-describedby“.
Fokus Falle innen; der primäre Fokus liegt auf der Überschrift oder dem ersten interaktiven Element.
Setzt den Fokus nach dem Schließen wieder auf den ursprünglichen Trigger.
Keine Hintergrundskrollung: 'document. body {overflow: hidden;} 'oder' inert 'auf dem Rest des DOM.
Tastaturunterstützung: Tab/Shift + Tab sind zyklisch; Esc schließt (wenn nicht szenarisch verboten).
Berücksichtigen Sie' prefers-reduced-motion': Deaktivieren/Vereinfachen von Animationen.

html
<div class="backdrop" data-open hidden></div>
<div class="dialog" role="dialog" aria-modal="true" aria-labelledby="d-title" aria-describedby="d-desc" hidden>
<h2 id =" d-title "> Confirm Bid </h2>
<p id =" d-desc "> Sum of 200 ₴ by factor 1. 85</p>
<div class="actions">
<button class =" btn btn--primary "> Confirm </button>
<button class =" btn btn--ghost "> Cancel </button>
</div>
</div>

6) Performance und Architektur

Rendern über das Portal (Ebene über der App) → weniger Probleme mit dem Z-Index.
Mounten Sie den Inhalt faul beim ersten Öffnen, demontieren Sie ihn nach dem Schließen der Animation (oder übersetzen Sie den Offscreen).
Animieren Sie nur 'transform/opacity'; Vermeiden Sie teure Blur/Schatten mit großen Abmessungen.
Blockieren Sie das Scrollen des Hintergrunds (Scroll-Lock), behalten Sie die aktuelle Position bei, damit es nach dem Schließen nicht „springt“.
Für große Listen im Drawer - Virtualisierung verwenden.

7) Mobile Muster

Unteres Blatt für schnelle Aktionen/Bestätigungen: Wischgesten nach unten zum Schließen (mit Schwelle).
Sticky-CTA unten; Schließknopf - links oben.
Safe-area-Einrückungen (notch/gesture areas).
Die Bildschirmtastatur darf den CTA nicht überlappen. layout - „Anheben“ von Inhalten oder eine feste Leiste über der Tastatur.

8) Motion-Design

Eingang: fade + leichte Verschiebung (modal: durch Y, drawer: durch die Achse des Erscheinens). 120-180 ms.
Output: kürzer (80-140 ms), easing 'cubic-bezier (0. 2,0,0. 2,1)`.
Hintergrund (Backdrop): Deckkraft 0 → 0. 4–0. 6. Ohne Pulsationen und endlose Blendung.
Für 'prefers-reduced-motion': keine Schaltung, nur fade.

9) Schließungsmanagement

Sofortige Schließung nur bei sicheren Einsätzen.
Bei einem Fehler - wir bleiben im Dialog, zeigen den Grund und Retry.
Bei der Hintergrundausführung - schließen Sie den Dialog und zeigen Sie den Toast „Wir führen im Hintergrund“..., plus den Abschnitt „Geschichte“.

10) Typische iGaming-Szenarien

10. 1 Wettbestätigung (Modal)

Inhalt: Ereignis, Koeffizient, Betrag, möglicher Gewinn, Gültigkeitsdauer des Koeffizienten.
Schaltflächen: „Bestätigen“ (primär), „Abbrechen“.
Verzögerungsmuster> 3 s: Text „Wir warten auf Bestätigung“...; wenn sich der Koeffizient ändert, ein ehrliches Upgrade.

10. 2 Cashout (Modal/Blatt)

Zeigt den aktuellen Cashout-Betrag und den Fenster-Timer an.
Bestätigung + mögliche Undo (wenn die Vorschriften es zulassen).

10. 3 Auswahl der Zahlungsmethode (Drawer)

Methodenliste mit Kommissionen/ETA; Auswahl → Miniformen.
Speichern der Standardmethode; Rückgabe ohne Verlust der eingegebenen Daten.

10. 4 KYC (Drawer → Modal)

Drawer zum Hochladen von Dokumenten/Hinweisen.
Modal, wenn Sie versuchen, mit einem unvollständigen Download zu schließen: Warnung vor ungespeicherten.

10. 5 Grenzen des verantwortungsvollen Spielens (Modal)

Radio „Tag/Woche/Monat“, Summenfeld, Zeile „Tritt in Kraft durch“....

11) Anti-Muster

Verschachtelte Modale (modal über modal). Verwenden Sie einen Dialog oder eine Folge von Schritten.
Modalka für die normale Anzeige von Inhalten (besser Drawer/Seite).
Verstecktes Kreuz oder Verschluss nur durch „Mikrozone“.
Eine riskante Aktion → die Erlaubnis, „im Hintergrund“ zu schließen.
Lange Form im Modal (→ in einem separaten Bildschirm/Panel).
Keine Rückkehr des Fokus zum Auslöser.

12) Design-System-Token (Beispiel)

json
{
"dialog": {
"radius": 12,
"shadow": "var(--elev-4)",
"sizes": { "s": 520, "m": 680, "l": 840 },
"backdropOpacity": 0. 5,
"padding": "20 24",
"gap": 16
},
"drawer": {
"width": { "s": 360, "m": 480, "l": 640 },
"edge": "right",
"radius": 12,
"shadow": "var(--elev-4)"
},
"motion": {
"inMs": 160,
"outMs": 120,
"ease": "cubic-bezier(0. 2,0,0. 2,1)",
"reduce": true
},
"a11y": {
"useAriaModal": true,
"focusTrap": true,
"returnFocus": true
}
}

css
.backdrop[data-open]{position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter:saturate(80%); opacity:1; transition:opacity. 16s}
.dialog,[data-drawer]{position:fixed; background:var(--bg-elevated); border-radius:12px; box-shadow:var(--elev-4);}
.dialog{inset:auto; left:50%;top:50%;transform:translate(-50%,-50%); max-width:840px; width:min(100% - 32px, var(--dialog-w,680px));}
[data-drawer="right"]{top:0; right:0; height:100%;width:var(--drawer-w,480px); transform:translateX(0)}
.dialog[hidden],.backdrop[hidden]{display:none}

13) Snippets des Verhaltens

js const openBtn = document. getElementById('open');
const dlg = document. querySelector('.dialog');
let prevFocus;

function openDialog() {
prevFocus = document. activeElement;
dlg. hidden = false; document. body. style. overflow = 'hidden';
const focusable = dlg. querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
(focusable[0]        dlg). focus();
function onKey(e){
if(e. key==='Escape') return closeDialog();
if(e. key!=='Tab') return;
const first = focusable[0], last = focusable[focusable. length-1];
if(e. shiftKey && document. activeElement===first){ e. preventDefault(); last. focus(); }
else if(!e.shiftKey && document. activeElement===last){ e. preventDefault(); first. focus(); }
}
dlg. addEventListener('keydown', onKey);
dlg. dataset. off = ()=> dlg. removeEventListener('keydown', onKey);
}
function closeDialog() {
dlg. dataset. off && dlg. dataset. off();
dlg. hidden = true; document. body. style. overflow = '';
prevFocus && prevFocus. focus();
}

js let startY=0, delta=0;
const sheet = document. querySelector('.sheet');
sheet. addEventListener('touchstart', e => startY = e. touches[0].clientY);
sheet. addEventListener('touchmove', e => {
delta = Math. max(0, e. touches[0].clientY - startY);
sheet. style. transform = `translateY(${delta}px)`;
});
sheet. addEventListener('touchend', () => {
if (delta > 120) sheet. classList. remove('open'); else sheet. style. transform = '';
delta = 0;
});

14) Metriken und Experimente

Open Rate/Completion Rate by modalks: wie viele haben die Aktion geöffnet und beendet.
Time-to-Decision: Vom Öffnen zum Klicken auf Primary.
Dismiss Rate und Ursachen (Schließen nach Esc/Hintergrund gegen „Abbrechen“).
Error/Retry Rate in Busy-Szenarien.
A/B: modal vs drawer, CTA Text, Feldreihenfolge, „confirmation“ vs „undo“.

15) QS-Checkliste

Fassbarkeit

• 'role =' dialog', 'aria-modal =' true', korrekt 'aria-labelledby/-describedby'.
• Focus trap funktioniert; Der Fokus kehrt zum Trigger zurück.
• ESC schließt (sofern zulässig); Tab ist zyklisch.
• Kontrast ≥ AA; Nicht nur die Farbe vermittelt Sinn.

Verhalten

• TTFF ≤ 100 ms; Animationen in 120-180 ms/out 80-140 ms.
• Scroll-Lock-Hintergrund ohne „Sprung“ der Seite.
• Unsaved-guard in schmutziger Form.
• Busy-Zustand, korrekte Retry/Fehler.

Schnittstelle

• Klare Überschrift und ein Primary-CTA.
• Das Kreuz/die Schaltfläche Schließen ist verfügbar.
• Die Größen sind adaptiv; auf dem Handy - ein Blatt mit einer Geste.

Leistung

• Portale/z-index sind korrekt; ohne „Durchblick“.
• Faule Initialisierung; nur transform/opacity wird animiert.

16) Dokumentation im Konstruktionssystem

Bestandteile: 'Modal', 'Drawer/Sheet', 'ConfirmDialog', 'UnsavedGuard'.
Token: Größen, Einzüge, Schatten, Animationen, Backdrop, Focus-Ring.
Hydes: „When modal vs drawer“, Copywriting-Muster, riskante Aktionen (confirm/undo), Scroll-Lock und Portale, Reduce-Motion.
Do/Don 't-Galerie: nested modals (don' t), Langformen im Modal (don't), Blatt zur Erweiterung des Kontextes (do).

Kurze Zusammenfassung

Modalka - für Lösungen unter voller Aufmerksamkeit, Drawer - um den Kontext zu erweitern, ohne den Fluss zu unterbrechen. Halten Sie die Struktur einfach, CTA ist eindeutig und Interaktionen sind vorhersehbar und zugänglich. Respektieren Sie die Leistung, blockieren Sie den Hintergrund und geben Sie den Fokus zurück. In iGaming-Szenarien wirkt sich dies direkt auf das Vertrauen aus: Wettbestätigungen, Cashout, Auswahl der Zahlungsmethode und KYC müssen ehrlich, schnell und sicher sein.