Modallar və çıxış panelləri

1) Nə zaman istifadə etmək lazımdır

Modal - kritik həllər və tam diqqət tələb edən qısa məsələlər üçün: hərəkətin təsdiqi, hüquqi razılıq, təhlükəli əməliyyatlar, qısa formalar ≤ 1-2 sahə. Arxa planı bloklayır.
Drawer/Sheet - kontekstin genişləndirilməsi üçün: obyekt detalları, atributların redaktəsi, siyahıdan seçim, köməkçi naviqasiya. Fon görünür → kontekst saxlanılır.

• Hərəkət konsentrasiya və təsdiq tələb edirsə → Modal.
• Konteksti saxlamaq və «paralel» baxış vermək lazımdır zaman → Drawer.

2) strukturu və ölçüləri

Modal

Başlıq (tələb olunur) → əsas mətn → CTA zonası (Primary/Secondary/Destructive).
Ölçüləri: S (480-560 px), M (640-720 px), L (≤ 840 px). Mobil telefonda - tam ekranlı sheet.

Drawer / Sheet

istiqamət: sağ kənar (masaüstü, redaktə), alt (mobil, hərəkət), bəzən sol (naviqasiya).
Eni: 360-480 (S), 480-640 (M), 640-800 (L). Mobil telefonda: 90-100% eni/hündürlüyü.

Məzmunun hündürlüyü həmişə məhduddur, içəridə - scroll; başlıq/STA sabit.

3) Kopyalama və CTA

Başlıq = hərəkət/məna: «Bahsi təsdiqlə», «Ödəniş metodunun seçimi», «KYC tələb olunur».
Mətn qısa, 1-2 cümlə. Qeyri-müəyyən düsturlardan çəkinin.
CTA: bir Primary, Secondary («Ləğv») və lazım olduqda Destructive.

Riskli hərəkətlər üçün 1 sətrə izahat əlavə edin: "Hərəkət geri dönməzdir. 10 saniyə ərzində ləğv edə bilərsiniz (varsa)"

4) Davranış və vəziyyət

Açılış: ani cavab ≤ 100 ms, sonra animasiya 120-180 ms.
Bağlanma: daha sürətli açılır (80-140 ms), fokusu tetikləyiciyə qaytarın.
Busy: 'aria-busy =' true 'konteynerdə, təkrarlama düyməsi.
Unsaved (çirkli forma): bağlandıqda - dialoq-xəbərdarlıq («Qeyd olunmamış dəyişikliklər var»).
Escape/fon klik: təhlükəsiz dialoqlar üçün icazə verilir; kritik üçün - yalnız açıq düymələr.

5) Mövcudluq (A11y)

Konteyner: 'role = «dialog' və 'aria-modal =» true' (bu modal üçün).
Başlıq 'aria-labelledby' vasitəsilə bağlıdır; təsvir - 'aria-describedby'.
Focus trap daxili; birincil diqqət - başlıq və ya ilk interaktiv element üzərində.
Bağlandıqdan sonra orijinal tetikleyiciyə diqqət yetirin.
Heç bir fon scroll: 'document. body {overflow: hidden;} 'və ya' inert 'DOM-un qalan hissəsində.
Klaviatura dəstəyi: Tab/Shift + Tab dövrü; Esc bağlanır (ssenari qadağan deyilsə).
'prefers-reduced-motion' nəzərə alın: animasiyaların söndürülməsi/sadələşdirilməsi.

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) Performans və memarlıq

Portal vasitəsilə render (tətbiqin üstündəki qat) → z-index ilə bağlı daha az problem.
İlk açılışda məzmunu tənbəlliklə bağlayın, bağlanış animasiyasından sonra sökün (və ya offscreen tərcümə edin).
Yalnız 'transform/opacity' animasiya edin; böyük ölçülü bahalı blur/kölgələrdən çəkinin.
Arxa planda (scroll-lock) bloklayın, bağlandıqdan sonra «atlamamaq» üçün cari mövqeyinizi saxlayın.
drawer böyük siyahılar üçün - virtualizasiya istifadə edin.

7) Mobil nümunələr

Bottom sheet sürətli hərəkətlər/təsdiqlər üçün: bağlamaq üçün aşağı swipe jestlər (eşik ilə).
Sticky-CTA aşağıda; bağlama düyməsi - soldan yuxarıya.
Safe-area girintiləri (notch/gesture areas).
Ekran klaviaturası CTA-nı örtməməlidir; layout - klaviatura üzərindəki məzmunu və ya sabit paneli «qaldırmaq».

8) Motion-dizayn

Giriş: fade + yüngül sürüşmə (modal: Y ilə, drawer: görünüş oxu ilə). 120-180 ms.
Çıxış: qısa (80-140 ms), easing 'cubic-bezier (0. 2,0,0. 2,1)`.
Fon (backdrop): qeyri-şəffaflıq 0 → 0. 4–0. 6. Heç bir dalğalanma və sonsuz parıltı.
'prefers-reduced-motion' üçün: heç bir kəsişmə, yalnız fade.

9) Bağlanış nəzarəti

Yalnız təhlükəsiz əməliyyatlarda dərhal bağlanın.
Səhv olarsa, dialoqda qalırıq, səbəbi və Retry göstəririk.
Arxa planda işləyərkən - dialoqu bağlayın və «Arxa planda yerinə yetiririk»... tostunu, üstəgəl «Tarix» bölməsini göstərin.

10) Tipik iGaming ssenariləri

10. 1 Bahis təsdiqi (Modal)

Məzmun: hadisə, əmsal, məbləğ, potensial qazanc, əmsalın etibarlılıq müddəti.
Düymələr: «Təsdiq et» (primary), «Ləğv et».
Gecikmə nümunəsi> 3 s: «Təsdiq gözləyirik» mətni...; əmsal dəyişdikdə - dürüst yeniləmə.

10. 2 Cashout (Modal/Sheet)

Cari cashout məbləği və pəncərə zamanlayıcısı göstərilir.
Təsdiq + mümkün Undo (tənzimləmə imkan verərsə).

10. 3 Ödəniş metodu seçimi (Drawer)

Komissiyalarla metodların siyahısı/ETA; → mini forma seçimi.
Varsayılan metodu saxlamaq; daxil edilmiş məlumatları itirmədən geri qaytarmaq.

10. 4 KYC (Drawer → Modal)

Sənədləri/ipuçlarını yükləmək üçün Drawer.
Modal yarımçıq yükləmə ilə bağlanmağa çalışarkən: qorunmayan xəbərdarlıq.

10. 5 Məsuliyyətli oyun limitləri (Modal)

Radio «Gün/Həftə/Ay», cəmi sahəsi, sətir «Sonra qüvvəyə minəcək»....

11) Anti-nümunələr

Daxili modallar (modal üstündə modal). Bir dialoq və ya addım ardıcıllığından istifadə edin.
Normal məzmun baxış modalka (daha yaxşı drawer/səhifə).
Gizli xaç və ya yalnız «mikrozon» ilə bağlanır.
Riskli hərəkət → «fona görə» bağlamaq icazəsi.
Modalkada uzun forma (→ ayrıca ekran/paneldə çıxarın).
Fokusun tetikleyiciyə qayıtmaması.

12) Dizayn sistemi tokenləri (nümunə)

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) Davranış snippetləri

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) Metriklər və təcrübələr

Modallara görə Open Rate/Completion Rate: nə qədər açılmış və tamamlanmışdır.
Time-to-Decision: açılışdan Primary-a klikləməyə qədər.
Dismiss Rate və səbəbləri (Esc/fon vs «Ləğv» bağlama).
busy-ssenarilərdə Error/Retry Rate.
A/B: modal vs drawer, CTA mətni, sahə sırası, «təsdiq» vs «undo».

15) QA-çek siyahısı

Mövcudluq

• 'role = «dialog', 'aria-modal =» true', doğru 'aria-labelledby/-describedby'.
• Focus trap işləyir; fokus tetikləyiciyə qayıdır.
• Esc bağlayır (əgər icazə verilirsə); Tab dövrü.
• Kontrast ≥ AA; yalnız rəng məna çatdırır.

Davranış

• TTFF ≤ 100 ms; animasiyalar in 120-180 ms/out 80-140 ms.
• «atlama» səhifə olmadan scroll-lock fon.
• Çirkli formada Unsaved-guard.
• Busy-state, düzgün Retry/səhvlər.

Interface

• Aydın başlıq və bir Primary-CTA.
• Xaç/« Bağla »düyməsi mövcuddur.
• Ölçüləri uyğundur; mobil telefonda - jestli sheet.

Performans

• Portallar/z-index düzgün; «işıqlandırma» olmadan.
• Tənbəl başlanğıc; yalnız transform/opacity animasiya.

16) Dizayn sistemində sənədləşmə

Komponentlər: 'Modal', 'Drawer/Sheet', 'ConfirmDialog', 'UnsavedGuard'.
Tokenlər: ölçülər, girintilər, kölgələr, animasiyalar, backdrop, focus-ring.
Qaydalar: «modal vs drawer», kopyalama şablonları, riskli hərəkətlər (confirm/undo), scroll-lock və portals, reduce-motion.
Do/Don 't-qalereyası: nested modals (don 't), modalkada uzun formalar (don 't), konteksti genişləndirmək üçün sheet (do).

Qısa xülasə

Modalka - tam diqqət həlləri üçün, drawer - axın kəsilmədən kontekstin genişləndirilməsi üçün. Strukturu sadə saxlayın, CTA - birmənalı, qarşılıqlı təsirlər - proqnozlaşdırıla bilən və əlçatan. Performansa hörmət edin, fonu bloklayın və fokusu geri verin. iGaming ssenarilərində bu birbaşa etimada təsir göstərir: bahis təsdiqləri, cashout, ödəniş metodu seçimi və KYC dürüst, sürətli və təhlükəsiz olmalıdır.