Modallar we çykýan paneller

1) Haçan ulanmaly

Modal (bellik bilen gepleşik) - doly ünsi talap edýän möhüm çözgütler we gysga meseleler üçin: hereketiň tassyklanmagy, hukuk ylalaşyklary, howply amallar, 1-2 meýdanyň ≤ gysgaça görnüşleri. Fon bloklaýar.
Drawer/Sheet - kontekstde giňeltmek üçin: obýekt jikme-jiklikleri, atributlary redaktirlemek, sanawdan saýlamak, kömekçi nawigasiýa. Fon görünýär → kontekst saklanýar.

• Eger herekete konsentrasiýa we tassyklama gerek bolsa → Modal.
• Haçan konteksti saklamaly we "paralel" syn bermeli → Drawer.

2) Gurluşy we ölçegleri

Modal

Sözbaşy (hökmany) → Esasy tekst → CTA-zonasy (Primary/Secondary/Destructive).
Ölçegleri: S (480-560 px), M (640-720 px), L (≤ 840 px). Jübi telefonynda - doly ekranly sheet.

Drawer / Sheet

Ugry: sag kenar (desktop, redaktirleme), aşaky (mobaýl, hereket), käte çep (nawigasiýa).
Giňligi: 360-480 (S), 480-640 (M), 640-800 (L). Jübi telefonynda: 90-100% ini/beýikligi.

Mazmunyň beýikligi elmydama çäklidir, içinde - skroll; başlyk/STA kesgitlenildi.

3) Göçürmek we CTA

Sözbaşy = hereket/many: "Stawkany tassyklamak", "Töleg usulyny saýlamak", "KYC talap edilýär".
Teksti gysgaça, 1-2 sözlem. Düşnüksiz formulalardan gaça duruň.
CTA: bir Primary, gapdalynda Sekondary ("Ýatyrmak") we zerur bolsa Destructive.

Töwekgelçilikli hereketler üçin 1-nji setire düşündiriş goşuň: "Hereket yzyna dolanyp bolmaýar. 10 sekuntda ýatyryp bilersiňiz (bar bolsa)"

4) Özüni alyp barşy we ýagdaýy

Açyş: derrew jogap ≤ 100 ms, soň animasiýa 120-180 ms.
Ýapmak: has çalt açylýar (80-140 ms), ünsi triggere gaýtarýarys.
Busy: 'aria-busy = "true" konteýnerde, gaýtalanýan düwme.
Unsaved (hapa görnüş): ýapylanda - duýduryş dialogy ("Saklanmadyk üýtgeşmeler bar").
Escape/Fon basmak: howply däl gepleşikler üçin geçerli; kritikler üçin - diňe aç-açan düwmeler.

5) Elýeterlilik (A11y)

Konteýner: 'role = "dialog' 'и' aria-modal =" true '' (şu modal üçin).
Sözbaşy 'aria-labelledby' arkaly baglanyşykly; düşündiriş - 'aria-describedby'.
Içindäki focus trap; esasy üns - sözbaşyda ýa-da ilkinji interaktiw elementde.
Fokusy ýapylandan soň başlangyç triggere gaýtarmak.
Arka fon ýok: 'document. body {overflow: hidden;} 'veya' inert 'DOM-yň galan böleginde.
Klawiatura goldawy: Tab/Shift + Tab aýlawly; Esc ýapýar (eger ssenariýa taýdan gadagan edilmese).
'prefers-reduced-motion' -y göz öňünde tutuň: animasiýalary öçürmek/ýönekeýleşdirmek.

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) Çykyş we binagärlik

Portal arkaly render (programmanyň üstündäki gatlak) → z-index bilen az problema.
Ilkinji açylanda mazmuny ýaltalyk bilen redaktirläň, animasiýa ýapylandan soň söküň (ýa-da offscreen terjime ediň).
Diňe 'transform/opacity' animasiýa ediň; uly ölçegli gymmat bahaly blur/kölegelerden gaça duruň.
Arka tarapy (scroll-lock) blokirläň, ýapylandan soň "bökmezlik" üçin häzirki ýeriňizi saklaň.
Drawer-da uly sanlar üçin wirtualizasiýany ulanyň.

7) Ykjam patternler

Çalt hereket etmek/tassyklamak üçin bottom sheet: ýapmak üçin swipiň aşak hereket etmegi (bosagasy bilen).
Aşakda Sticky-CTA; Ýapmak düwmesi - ýokardan çepe.
Safe-area girintileri (notch/gesture areas).
Ekran klawiaturasy CTA-ny ýapmaly däldir; layout - klawiaturanyň üstündäki mazmuny ýa-da kesgitlenen paneli "götermek".

8) Hereket dizaýny

Giriş: fade + ýeňil geçiş (modal: Y, drawer: peýda bolan okda). 120-180 ms.
Çykyş: gysga (80-140 ms), easing 'cubic-bezier (0. 2,0,0. 2,1)`.
Fon (backdrop): aç-açanlyk 0 → 0. 4–0. 6. Titremesiz we tükeniksiz şöhle saçmazdan.
'prefers-reduced-motion' üçin: üýtgemän, diňe fade.

9) Ýapmagy dolandyrmak

Diňe howpsuz amallarda haýal etmän ýapmak.
Ýalňyşlyk ýüze çyksa, gepleşikde galarys, sebäbini we Retry-ni görkezeris.
Fonda ýerine ýetirilende - dialogy ýapyň we "Fonda ýerine ýetirýäris"... tostuny, üstesine-de "Taryh" bölümini görkeziň.

10) iGaming-iň nusgawy ssenarileri

10. 1 Nyrhy tassyklamak (Modal)

Mazmuny: waka, koeffisiýent, mukdar, potensial ýeňiş, koeffisiýentiň hereket ediş möhleti.
Düwmeler: "Tassyklamak" (primary), "Ýatyrmak".
Gijikdirme patterni> 3 s: "Tassyklamagyna garaşýarys"...; koeffisiýent üýtgän halatynda - dogruçyl täzelenme.

10. 2 Keshaut (Modal/Sheet)

Häzirki nagt pul mukdaryny we penjiräniň wagtyny görmek.
Tassyklamak + mümkin Undo (eger düzgünnama rugsat berse).

10. 3 Töleg usulyny saýlamak (Drawer)

Komissiýalar/ETA bilen usullaryň sanawy; → kiçi şekilleri saýlamak.
Usulyň saklanmagy; girizilen maglumatlary ýitirmezden yzyna gaýtarmak.

10. 4 KYC (Drawer → Modal)

Resminamalary/maslahatlary ýüklemek üçin drawer.
Tamamlanmadyk ýüklemäni ýapjak bolanda modal: saklanmadyk duýduryş.

10. 5 Jogapkär oýnuň çäkleri (Modal)

"Gün/Hepde/Aý" radiosy, jemi meýdany, "Arkaly güýje girer" setiri....

11) Anti-patternler

Içerki modallar (modal üstünde modal). Bir dialogy ýa-da ädimleriň yzygiderliligini ulanyň.
Adaty mazmuny görmek üçin modalka (has gowy drawer/sahypa).
Gizlin haç ýa-da ýapmak diňe "mikrozon" arkaly.
Töwekgelçilikli hereket → "fon boýunça" ýapmak rugsady.
Modalkadaky uzyn görnüş (→ aýratyn ekrana/panele çykaryň).
Fokusyň triggere gaýdyp gelmezligi.

12) Dizaýn-ulgamyň bellikleri (mysal)

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) Özüňi alyp barşyň ýaraglary

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) Metrikler we synaglar

"Open Rate/Completion Rate" modallar boýunça: näçe açdyk we tamamladyk.
"Time-to-Decision": Açylyşdan "Primary" -a çenli.
Dismiss Rate we sebäpler (Esc/fon vs "Ýatyryş" boýunça ýapmak).
busy-ssenarilerde Error/Retry Rate.
A/B: modal vs drawer, CTA teksti, meýdan tertibi, "tassyklama" vs "undo".

15) QA-çek-sanawy

Elýeterlilik

• 'role = "dialog"', 'aria-modal = "true' ', dogry' aria-labelledby/-describedby '.
• Focus trap işleýär; fokus triggere gaýdyp gelýär.
• Esc ýapýar (rugsat berilse); Tab aýlawly.
• Kontrast ≥ AA; diňe bir reňk many bermeýär.

Özüni alyp barşy

• TTFF ≤ 100 ms; animasiýa in 120-180 ms/out 80-140 ms.
• Sahypany "bökmezden" fon scroll-lock.
• Hapa görnüşde Unsaved-guard.
• Busy-ýagdaý, dogry Retry/ýalňyşlyklar.

Interfeýs

• Aýdyň sözbaşy we bir sany Primary-CTA.
• Haç/" Ýapmak "düwmesi bar.
• Ölçegleri uýgunlaşdyrylýar; jübi telefonynda - alamatly sheet.

Çykyş

• /z-index portallary dogry; "şöhlelenmän".
• Ýalta başlangyç; diňe transform/opacity animasiýa edilýär.

16) Dizaýn-ulgamdaky resminamalar

Komponentler: 'Modal', 'Drawer/Sheet', 'ConfirmDialog', 'UnsavedGuard'.
Bellikler: ölçegler, girintiler, kölegeler, animasiýalar, backdrop, focus-ring.
Gaýdlar: "Haçan modal vs drawer", göçürmek şablonlary, töwekgelçilikli hereketler (confirm/undo), skroll-lock we portals, reduce-motion.
Do/Don 't-galereýa: nested modals (don' t), modalkadaky uzyn görnüşler (don 't), konteksti giňeltmek üçin sheet (do).

Gysgaça gysgaça

Modalka - doly üns bilen çözgütler üçin, drawer - akymy kesmezden konteksti giňeltmek üçin. Gurluşy ýönekeý, CTA-ny birmeňzeş we özara täsirleri öňünden aýdyp boljak we elýeterli saklaň. Çykyşa hormat goýuň, fon blokirläň we fokusyňyzy yzyna gaýtaryň. iGaming ssenariýalarynda bu ynama gönüden-göni täsir edýär: nyrhlary tassyklamak, nagt pul, töleg usulyny saýlamak we KYC dogruçyl, çalt we ygtybarly bolmaly.