Modalkalar va chiqish panellari

1) Qachon foydalanish kerak

Modal - tanqidiy yechimlar va toʻliq eʼtiborni talab qiladigan qisqa vazifalar uchun: harakatni tasdiqlash, huquqiy kelishuvlar, xavfli operatsiyalar, 1-2 ta maydon ≤ qisqacha shakllari. Fonni bloklaydi.
Drawer/Sheet - kontekstni kengaytirish uchun: obʼekt tafsilotlari, atributlarni tahrirlash, roʻyxatdan tanlash, yordamchi navigatsiya. Fon koʻrinadi → kontekst saqlanadi.

• Agar harakat konsentratsiya va tasdiqlash kerak boʻlsa → Modal.
• Kontekstni saqlash va «parallel» sharh berish kerak bo’lganda → Drawer.

2) Tuzilmasi va o’lchamlari

Modal

Sarlavha (majburiy) → asosiy matn → CTA-zona (Primary/Secondary/Destructive).
Oʻlchamlari: S (480-560 px), M (640-720 px), L (≤ 840 px). Mobilkada - to’liq ekranli sheet.

Drawer / Sheet

Yo’nalishi: o’ng chekkasi (desktop, tahrir), pastki (mobayl, harakat), ba’zan chap (navigatsiya).
Kengligi: 360-480 (S), 480-640 (M), 640-800 (L). Mobilkada: eni/balandligi 90-100%.

Kontentning balandligi har doim chegaralangan, ichkarida - skroll; / STA sarlavhasi qayd etilgan.

3) Kopirayting va CTA

Sarlavha = harakat/ma’no: «Stavkani tasdiqlash», «To’lov usulini tanlash», «KYC talab qilinadi».
Matn qisqacha, 1-2 jumla. Noaniq formulalardan qoching.
CTA: bitta Primary, uning yonida Secondary («Bekor qilish») va zarur hollarda Destructive.

Xatarli harakatlar uchun 1 satrga tushuntirish qo’shing: "Harakat qaytarib bo’lmaydi. Siz 10 soniya ichida bekor qilishingiz mumkin (agar mavjud boʻlsa)"

4) Xulq-atvori va

Ochish: bir zumda javob berish ≤ 100 ms, keyin animatsiya 120-180 ms.
Yopish: tezroq ochiladi (80-140 ms), fokusni triggerga qaytaramiz.
Busy:’aria-busy =’true’konteynerda, takrorlash tugmasi.
Unsaved (iflos shakl): yopilganda - ogohlantirish dialogi («Saqlanmagan oʻzgarishlar mavjud»).
Escape/orqa fon bosish: xavfli boʻlmagan dialoglar uchun yaroqli; tanqidchilar uchun - faqat aniq tugmalar.

5) Foydalanish imkoniyati (A11y)

Konteyner:’role = «dialog’va’aria-modal =» true’(haqiqiy modalka uchun).
Sarlavha’aria-labelledby’orqali bog’langan; tavsifi -’aria-describedby’.
Focus trap ichida; birlamchi fokus - sarlavha yoki birinchi interaktiv elementga.
Fokusni yopilgandan keyin boshlangʻich triggerga qaytarish.
Orqa fon:’document. body {overflow: hidden;}’yoki’inert’boshqa DOM’da.
Klaviatura: Tab/Shift + Tab siklli; Esc yopiladi (agar skript taqiqlanmagan boʻlsa).
’prefers-reduced-motion’: animatsiyalarni oʻchirish/soddalashtirish.

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) Spektakl va arxitektura

Portal orqali render (ilova ustidagi qatlam) → z-index bilan bogʻliq muammolar kamroq.
Kontentni birinchi marta ochishda dangasa qilib oʻrnating, yopish animatsiyasidan keyin demontaj qiling (yoki offscreen tarjima qiling).
Faqat’transform/opacity’ni jonlantiring; katta hajmdagi qimmatbaho blur/soyalardan saqlaning.
Orqa fon skrollini (scroll-lock) blokirovka qiling, yopilgandan keyin «sakrab tushmaslik» uchun joriy pozitsiyani saqlang.
Drawer’dagi katta roʻyxatlar uchun virtualizatsiyadan foydalaning.

7) Mobil patternlar

Tezkor harakat/tasdiqlash uchun Bottom sheet: yopish uchun pastga svayp imo-ishoralari (ostonali).
Sticky-CTA pastki qismida; yopish tugmasi - yuqoridan chapdan.
Safe-area chegara (notch/gesture areas).
Ekran klaviaturasi CTAni yopmasligi kerak; layout - klaviatura ustidagi kontent yoki oʻrnatilgan panel.

8) Motion-dizayn

Kirish: fade + engil siljish (modal: Y bo’yicha, drawer: paydo bo’lish o’qi bo’yicha). 120-180 ms.
Chiqish: qisqaroq (80-140 ms), easing’cubic-bezier (0. 2,0,0. 2,1)`.
Orqa fon (backdrop): shaffoflik 0 → 0. 4–0. 6. Pulsatsiyasiz va cheksiz porlamasiz.
’prefers-reduced-motion’ uchun: siljishsiz, faqat fade.

9) Yopishni boshqarish

Faqat xavfsiz operatsiyalarda darhol yopish.
Agar xato bo’lsa, biz muloqotda qolamiz, sababini va Retry’ni ko’rsatamiz.
Orqa fonda bajarilganda - dialogni yoping va «Fonda bajaramiz»..., shuningdek «Tarix» bo’limini ko’rsating.

10) iGaming namunaviy stsenariylari

10. 1 Stavkani tasdiqlash (Modal)

Mazmuni: hodisa, koeffitsiyent, summa, potentsial yutuq, koeffitsiyentning amal qilish muddati.
Tugmalar: «Tasdiqlash» (primary), «Bekor qilish».
Kechikish patterni> 3 s: matn «Tasdiqlashni kutmoqdamiz»...; koeffitsiyent o’zgarganda - halol yangilanish.

10. 2 Keshaut (Modal/Sheet)

Joriy keshaut miqdorini koʻrsatish va oynaning taymeri.
Tasdiqlash + mumkin Undo (agar reglament imkon bersa).

10. 3 To’lov usulini tanlash (Drawer)

Komissiyalar/ETA bilan usullar ro’yxati; → mini-shaklni tanlash.
Andoza usulni saqlash; kiritilgan ma’lumotlarni yo’qotmasdan qaytarish.

10. 4 KYC (Drawer → Modal)

Hujjatlarni yuklash uchun Drawer.
Modal tugallanmagan yuklash bilan yopilayotganda: saqlanmagan ogohlantirish.

10. 5 Mas’uliyatli o’yin limitlari (Modal)

«Kun/Hafta/Oy» radiosi, summa maydoni, «Kuchga kiradi» satri....

11) Anti-patternlar

Ichki modallar (modal ustiga modal). Bitta dialog yoki qadamlar ketma-ketligidan foydalaning.
Oddiy kontent koʻrish uchun modalka (yaxshiroq drawer/sahifa).
Faqat «mikrozon» bo’yicha yashirin xoch yoki yopish.
Xatarli harakat → ruxsatnomani «fon boʻyicha» yopish.
Modalkadagi uzun shakl (→ alohida ekranga/panelga olib chiqing).
Fokusni triggerga qaytarib boʻlmaydi.

12) Dizayn-tizim tokenlari (misol)

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) Xulq-atvor snippetlari

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) Metrika va eksperimentlar

Open Rate/Completion Rate: qancha ochilgan va tugagan.
Time-to-Decision: ochilishdan boshlab Primary bosishgacha.
Dismiss Rate va sabablari (Esc/fon vs «Bekor qilish» bo’yicha yopish).
Busy-stsenariylarda Error/Retry Rate.
A/B: modal vs drawer, CTA matni, maydonlarning tartibi, «tasdiqlash» vs «undo».

15) QA-chek-varag’i

Foydalanish imkoniyati

• ’role = «dialog’’,’aria-modal =» true’’, toʻgʻri’aria-labelledby/-describedby’.
• Focus trap ishlaydi; fokus triggerga qaytadi.
• Esc yopadi (agar ruxsat etilsa); Tab tsiklik.
• Kontrast ≥ AA; nafaqat rang maʼnoni bildiradi.

Xulq-atvori

• TTFF ≤ 100 ms; animatsiyalar in 120-180 ms/out 80-140 ms.
• Sahifani «sakrab» olmasdan orqa fon scroll-lock.
• Iflos shaklda Unsaved-guard.
• Busy-holati, to’g’ri Retry/xatolar.

Interfeys

• Aniq sarlavha va bitta Primary-CTA.
• Xoch/Yopish tugmasi mavjud.
• O’lchamlari moslashuvchan; mobilkada - ishorali sheet.

Spektakl

• Portallar/z-index to’g "ri; «yoritmasdan».
• Dangasa tashabbus; faqat transform/opacity animatsiya qilinadi.

16) Dizayn-tizimdagi hujjatlar

Komponentlar:’Modal’,’Drawer/Sheet’,’ConfirmDialog’,’UnsavedGuard’.
Tokenlar: oʻlchamlar, cheklovlar, soyalar, animatsiyalar, backdrop, focus-ring.
Gaydlar: «Qachon modal vs drawer», kopiraytering shablonlari, xavfli harakatlar (confirm/undo), scroll-lock va portals, reduce-motion.
Do/Don’t-galereyasi: nested modals (don’t), modalkadagi uzun shakllar (don’t), kontekstni kengaytirish uchun sheet (do).

Qisqacha xulosa

Modalka - to’liq e’tibor ostida echimlar uchun, drawer - oqimni uzmasdan kontekstni kengaytirish uchun. Tuzilishni sodda, CTAni bir ma’noda, o’zaro ta’sirni esa oldindan aytib bo’lmaydigan va ochiq saqlang. Spektaklni hurmat qiling, fonni bloklang va fokusni qaytaring. iGaming ssenariylarida bu bevosita ishonchga ta’sir qiladi: stavkalarni tasdiqlash, keshaut, to’lov usulini tanlash va KYC halol, tezkor va xavfsiz bo’lishi kerak.