Modale i panele wyjściowe

1) Kiedy używać co

Modal (dialog z tłem) - dla rozwiązań krytycznych i krótkich zadań wymagających pełnej uwagi: potwierdzenie działania, zgoda prawna, niebezpieczne operacje, krótkie formularze ≤ 1-2 pola. Zamyka tło.
Szuflada/Arkusz (panel wyciągania) - dla rozszerzenia na miejscu: szczegóły obiektu, edycja atrybutów, wybór z listy, nawigacja pomocnicza. Tło jest widoczne → kontekst jest zachowany.

• Jeśli działanie wymaga koncentracji i potwierdzenia → Modal.
• Kiedy zapisać kontekst i dać „równoległy” przegląd → Szuflada.

2) Struktura i wymiary

Modal

Tytuł (wymagany) → organ → CTA (pierwotny/wtórny/niszczący).
Wymiary: S (480-560 px), M (640-720 px), L (≤ 840 px). Na telefonie komórkowym - arkusz pełnoekranowy.

Szuflada/arkusz

Kierunek: prawy brzeg (pulpit, edycja), dolny (mobilny, akcje), czasami lewy (nawigacja).
Szerokość: 360-480 (S), 480-640 (M), 640-800 (L) Na telefonie komórkowym: 90-100% szerokość/wysokość.

Wysokość zawartości jest zawsze ograniczona, przewijając się wewnątrz; nagłówek/STA są stałe.

3) Copywriting i CTA

Tytuł = Działanie/Znaczenie: Potwierdź stawkę, Wybierz formę płatności, Wymagane KYC.
Krótki tekst, 1-2 zdania. Unikaj niejasnych formuł.
CTA: jeden podstawowy, następny wtórny („anulowanie”) i, w razie potrzeby, destrukcyjny.

W przypadku ryzykownych działań dodaj 1-liniowe wyjaśnienie: "Działanie jest nieodwracalne. Będzie można anulować w ciągu 10 sekund (jeśli dostępne) "

4) Zachowanie i stany

Otwarcie: natychmiastowa odpowiedź ≤ 100 ms, następnie animacja 120-180 ms.
Zamknięcie: szybciej niż otwarcie (80-140 ms), zwróć uwagę na spust.
Zajęty: 'aria-busy =' true 'na pojemniku, przycisk z blokadą wsteczną.
Unsaved (brudny formularz): at closing - dialog-warning („Są niezapisane zmiany”).
Ucieczka/kliknij na tle: akceptowalne dla dialogów innych niż niebezpieczne; dla krytycznych - tylko wyraźne przyciski.

5) Dostępność (A11y)

Kontener: 'role =' dialog'i 'aria-modal =' true '' (dla prawdziwego modalu).
Tytuł jest powiązany przez „aria-labelledby”; opis - „aria-descripedby”.
Pułapka ostrości wewnątrz; główny nacisk skupia się na nagłówku lub pierwszym interaktywnym elemencie.
Zwraca skupienie się na oryginalnym wyzwalaczu po zamknięciu.
Brak tła przewijania: 'dokument. ciało {przepełnienie: ukryte;} 'lub' obojętne 'na pozostałej części DOM.
Obsługa klawiatury: Tab/Shift + Tab są cykliczne; Esc zamyka (chyba że jest to zabronione).
Rozważmy „zredukowany ruch”: wyłączenie/uproszczenie animacji.

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) Wydajność i architektura

Rendering przez portal (warstwa na górze aplikacji) → mniej z-index problemy.
Zamontuj zawartość leniwie po pierwszym otwarciu, nie zamontuj po zamknięciu animacji (lub przetłumacz offscreen).
Animować tylko „przekształcić/nieprzezroczystość”; unikać kosztownych rozmazanych/ponadgabarytowych cieni.
Zablokować zwój tła (zwoje-blokada), zachować bieżącą pozycję, aby nie „skakać” po zamknięciu.
Dla dużych list w szufladzie - skorzystaj z wirtualizacji.

7) Wzory mobilne

Dolny arkusz do szybkich działań/potwierdzeń: przesuń gesty w dół do zamknięcia (z progiem).
Lepki-CTA na dole; przycisk zamknij - od góry w lewo.
Indenty strefy bezpieczeństwa (obszary wycięcia/gestu).
Klawiatura na ekranie nie powinna nakładać się na CTA; układ - zawartość „podnoszenia” lub stały panel nad klawiaturą.

8) Projekt ruchu

Wejście: blaknięcie + zmiana światła (modal: wzdłuż Y, szuflada: wzdłuż osi wyglądu). 120-180 ms.
Wyjście: krótsze (80-140 ms), łatwiejsze 'sześcienne-bezier (0. 2,0,0. 2,1)`.
Tło-zmętnienie jest 0 → 0. 4–0. 6. Bez pulsacji i niekończącego się blasku.
Dla „woli zredukowany ruch”: brak zmiany, tylko zanik.

9) Zarządzanie zamknięciem

Natychmiastowe zamknięcie tylko dla bezpiecznych operacji.
Jeśli wystąpi błąd, pozostaniemy w dialogu, pokażemy powód i Retry.
W tle execution - zamknij okno dialogowe i pokaż toast „Wykonujemy w tle”..., plus sekcja „Historia”.

10) Typowe scenariusze iGaming

10. 1 Potwierdzenie oferty (Modal)

Zawartość: zdarzenie, współczynnik, kwota, potencjalny zysk, okres ważności współczynnika.
Przyciski: „Potwierdź” (podstawowy), „Anuluj”.
Wzór opóźnienia> 3 s: tekst „Czekając na potwierdzenie”...; jeśli współczynnik się zmieni, uczciwa aktualizacja.

10. 2 Cashout (Modal/arkusz)

Wyświetla bieżącą kwotę wypłaty i timer okna.
Potwierdzenie + możliwe cofnięcie (jeśli pozwala na to regulacja).

10. 3 Wybór metody płatności (szuflada)

Wykaz metod z prowizjami/ETA; Wybiera → mini formularza.

Zapisywanie metody domyślnej; Powrót bez utraty danych wejściowych

10. 4 KYC (szuflada → Modal)

Szuflada do załadunku dokumentów/zapytań.
Modal podczas próby zamknięcia z niekompletnym obciążeniem: ostrzeżenie o nieskalanym.

10. 5 Granice odpowiedzialnego zagrania (Modal)

Radio „Dzień/tydzień/miesiąc”, pole kwoty, linia „wejdzie w życie w”....

11) Anty-wzory

Modale gniazdowane (modal over modal). Użyj pojedynczego okna dialogowego lub kolejności kroków.
Modalka do regularnego przeglądania treści (lepsza szuflada/strona).
Ukryty krzyż lub zamknięcie tylko przez „mikrozone”.
Ryzykowne działanie → pozwolenie na zamknięcie „w tle”.
Długi kształt w modalu (przenieść → do oddzielnego ekranu/panelu).
Nie zwracaj uwagi na wyzwalanie.

12) Żetony systemu projektowania (przykład)

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 zachowania

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) Metryki i eksperymenty

Rate Open/Completion Rate by modal: ilu otworzyło i zakończyło akcję.
Czas do decyzji: Od otwarcia do kliknięcia na podstawowym.
Odrzucenie stawki i powodów (Esc/tło zamknij vs „Anuluj”).
Wskaźnik błędów/Retry w ruchliwych skryptach.
A/B: modal vs szuflada, tekst CTA, pole kolejności, „potwierdzić” vs „cofnąć”.

15) Lista kontrolna QA

Dostępność

• 'role =' dialog ',' aria-modal = 'true' ', correct' aria-labelledby/-describedby '.
• Focus trap works; skupienie wraca do spustu.
• Esc zamyka (jeżeli jest to dozwolone); Zakładka jest cykliczna.
• Kontrast ≥ AA; To nie tylko kolor przekaże znaczenie.

Zachowanie

• TTFF ≤ 100 ms; animacja w 120-180 ms/out 80-140 ms.
• Przewiń-blokuj tło bez „skakania” strony.
• Nieskalana osłona w brudnej formie.
• Zajęty stan, poprawny Retry/błędy.

Interfejs

• Wyraźny nagłówek i jeden podstawowy CTA.
• Dostępny jest przycisk cross/close.
• Wymiary są adaptacyjne; na telefon komórkowy - arkusz z gestem.

Wydajność

• Portale/z-index są poprawne; bez „transmisji”.
• Leniwe inicjalizacja; tylko transformacja/nieprzezroczystość są animowane.

16) Dokumentacja w systemie projektowym

Komponenty: 'Modal', 'Szuflada/arkusz', 'Okno dialogowe ', 'UnsavedGuard'.
Żetony: wymiary, tiret, cienie, animacje, tło, pierścień ostrości.
Przewodniki: „Gdy modal vs szuflada”, wzory kopiowania, ryzykowne działania (potwierdzić/cofnąć), zwoje-blokada i portale, zmniejszyć ruch.
Do/Don gallery: gniazdowane modale (nie), długie formy w modalu (nie), arkusz do rozszerzenia kontekstu (do).

Krótkie podsumowanie

Modalka - dla decyzji pod pełną uwagą, szuflada - rozszerzyć kontekst bez łamania przepływu. Utrzymać strukturę proste, CTA jednoznaczne, i interakcje przewidywalne i dostępne. Uszanuj wydajność, zablokuj tło i zwróć uwagę. W scenariuszach iGaming, to bezpośrednio wpływa na zaufanie: potwierdzenie zakładu, cashout, wybór metody płatności i KYC musi być uczciwy, szybki i bezpieczny.