Модалҳо ва панелҳои баромад

1) Кай истифода бурдани чӣ

Модал (муколама бо пасзамина) - барои ҳалли танқидӣ ва вазифаҳои кӯтоҳе, ки таваҷҷуҳи комилро талаб мекунанд: тасдиқи амал, ризоияти ҳуқуқӣ, амалиётҳои хатарнок, шаклҳои кӯтоҳ ≤ майдонҳои 1-2. Замина қуфл мекунад.
Ҷойгиркунӣ/варақ (панели кашолакунӣ) - барои васеъкунии ҷой: тафсилоти объект, таҳрири атрибут, интихоб аз рӯйхат, паймоиши ёрирасон. Замина намоён аст → контекст нигоҳ дошта мешавад.

• Агар ин амал ба консентратсия ва тасдиқи § Modal ниёз дошта бошад.
• Кай барои нигоҳ доштани контекст ва шарҳи "параллелӣ" -и Drawer.

2) Сохтор ва андоза

Модал

Сарлавҳа (талаб карда мешавад) → бадан → CTA (ибтидоӣ/миёна/харобкунанда).
Андоза: S (480-560 px), M (640-720 px), L (≤ 840 px). Дар мобилӣ - варақи пурраи экран.

Кашолакунӣ/Варақ

Самт: канори рост (мизи корӣ, таҳрир), поён (мобилӣ, амалҳо), баъзан чап (паймоиш).
Бари: 360-480 (S), 480-640 (M), 640-800 (L) Дар бораи мобилӣ: 90-100% паҳнӣ/баландӣ.

Баландии мундариҷа ҳамеша маҳдуд аст, дар дохили ҳаракат; сарлавҳа/STA собит шудааст.

3) Нусхабардорӣ ва CTA

Унвон = Амал/Маъно: Меъёри тасдиқкунӣ, Усули пардохтро интихоб кунед, KYC лозим аст.
Матни кӯтоҳ, 1-2 ҳукм. Аз формулаҳои норавшан дурӣ ҷӯед.
CTA: як ибтидоӣ, навбатии миёна ("Бекоркунӣ") ва дар ҳолати зарурӣ харобкунанда.

Барои амалҳои хатарнок шарҳи 1-сатрро илова кунед: "Амал бебозгашт аст. Шумо метавонед дар муддати 10 сония бекор кунед (агар дастрас бошад) "

4) Рафтор ва ҳолатҳо

Кушодан: вокуниши фаврӣ ≤ 100 мс, баъд аниматсия 120-180 мс.
Пӯшида: тезтар аз кушодани (80-140 мс), фокусро ба триггер баргардонед.
Банд: 'aria-busy = "ҳақиқӣ"' дар контейнер, тугма бо қулфи такрорӣ.
Нигоҳ надоштан (шакли ифлос): ҳангоми пӯшидан - диалог-огоҳӣ ("Тағйироти нигоҳ дошта нашуда").
Аз пасзамина гурехтан/пахш кардан: барои муколамаҳои хатарнок қобили қабул аст; барои интиқодӣ - танҳо тугмаҳои возеҳ.

5) Дастрасӣ (A11y)

Контейнер: 'нақш = "муколама" ва' aria-modal = "ҳақиқӣ" (барои модали воқеӣ).
Унвон тавассути 'aria-labelledby' пайваст карда мешавад; тавсиф - 'aria-descripedby'.
Доми фокус дар дохили; диққати асосӣ ба сарлавҳа ё ҷузъи аввалини интерактивӣ дода мешавад.
Пас аз пӯшида фокусро ба триггери аслӣ бармегардонад.
Заминаи ҳаракат нест: 'ҳуҷҷат. бадан {аз ҳад зиёд: пинҳон;} 'ё' инерт 'дар қисми боқимондаи DOM.
Дастгирии клавиатура: Ҷадвал/Shift + Ҷадвал даврӣ аст; Esc пӯшида мешавад (агар скрипт манъ карда нашуда бошад).
Ба назар гиред 'prefers-кам-ҳаракат': ғайрифаъол/содда кардани аниматсияҳо.

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) Иҷро ва меъморӣ

Пешниҳод тавассути портал (қабати болои барнома) → мушкилоти камтар z-index.
Ҳангоми кушодани аниматсия (ё тарҷумаи экрани экран) мундариҷаро ба таври танбал насб кунед.
Танҳо 'табдил/шаффофият' animate; аз сояҳои гаронбаҳо/калонҳаҷм канорагирӣ кунед.
Рӯйхати пасзаминаро қулф кунед (ҳаракат кунед-қулф), ҳолати ҷориро нигоҳ доред, то ки пас аз пӯшида "ҷаҳида" нашавад.
Барои рӯйхатҳои калон дар кашиш - виртуализатсияро истифода баред.

7) Намунаҳои мобилӣ

Варақаи поёнӣ барои амалҳои фаврӣ/тасдиқҳо: барои пӯшидани имову ишора ба поён (бо ҳадди ниҳоӣ).
Часпанда-CTA дар поёни; пӯшидан - аз чапи боло.
Нишондиҳандаҳои минтақаи бехатар (минтақаҳои сифат/имову ишора).
Клавиатураи экран набояд CTA-ро такрор кунад; тарҳ - "бардоштан" ё панели собит дар болои клавиатура.

8) Тарҳи ҳаракат

Вуруд: пажмурда шудан + тағйири рӯшноӣ (модалӣ: дар баробари Y, кашиш: дар баробари меҳвари намуди зоҳирӣ). 120-180 мс.
Натиҷа: кӯтоҳтар (80-140 мс), сабуккунандаи 'кубик-безер (0. 2,0,0. 2,1)`.
Замина-шаффофият 0 → 0 аст. 4–0. 6. Бе пульсатсия ва дурахши беохир.
Барои 'афзалият-кам-ҳаракат': смена нест, танҳо пажмурда мешавад.

9) Идоракунии пӯшида

Бастани фаврӣ танҳо барои амалиёти бехатар.
Агар хато бошад, мо дар муколама мемонем, сабабро нишон медиҳем ва Ретри.
Дар иҷрои замина - муколамаро пӯшед ва вудкои "Мо дар замина иҷро мекунем"... ва илова бар он фасли "Таърих" -ро нишон диҳед.

10) Сенарияҳои маъмулии IGgaming

10. 1 Тасдиқи дархост (Модал)

Мазмун: ҳодиса, коэффисиент, миқдор, фоидаи эҳтимолӣ, мӯҳлати эътибори коэффисиент.
Тугмаҳо: "Тасдиқ" (ибтидоӣ), "Бекор кардан".
Нақшаи таъхир> 3 s: матни "Интизори тасдиқ"...; агар коэффисиент тағир ёбад, навсозии ростқавл.

10. 2 Нақд (Модал/Варақ)

Миқдори ҷории пули нақд ва вақтсанҷи тирезаро нишон медиҳад.
Тасдиқ + Бекор кардани имконпазир (агар танзим имкон диҳад).

10. 3 Интихоби усули пардохт (Drawer)

Рӯйхати усулҳо бо комиссияҳо/ETA; Интихоби → шакли мини.

Нигоҳ доштани усули пешфарз; Бозгашт бе талафи вуруд

10. 4 KYC (Кашолакунанда → Модал)

Кашолакунанда барои пурборкунии ҳуҷҷатҳо/дархостҳо.
Модал ҳангоми кӯшиши пӯшидани сарбории нопурра: огоҳӣ дар бораи дастнорас.

10. 5 Маҳдудиятҳои бозӣ (Модалӣ)

Радиои "Рӯз/ҳафта/моҳ", майдони маблағ, сатри "Дар... эътибор пайдо мекунад"....

11) Анти-намунаҳо

Модалҳои лона (модалӣ аз модалӣ). Диалоги ягона ё пайдарҳамии қадамро истифода баред.
Модалка барои тамошои мунтазами мундариҷа (нақшакаши беҳтар/саҳифа).
Салиби пинҳон ё пӯшида танҳо аз ҷониби "microzone".
Амали хатарнок → иҷозат барои пӯшидани "дар замина".
Шакли дароз дар модал (гузарондани § ба экрани/панели алоҳида).
Ягон фокус ба триггер бармегардад.

12) Нишонаҳои системаи тарроҳӣ (мисол)

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) Пораҳои рафтор

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) Нишондиҳандаҳо ва таҷрибаҳо

Меъёри кушод/Сатҳи анҷом аз рӯи модалӣ: чанд нафар амалро кушоданд ва анҷом доданд.
Вақт-ба-қарор: Аз кушодан то клик кардани ибтидоӣ.
Меъёри бекоркунӣ ва сабабҳо (Esc/background vs "Бекор кардан").
Хатогӣ/Меъёри такрорӣ дар скриптҳои банд.
A/B: modal vs discer, матни CTA, фармоиши саҳроӣ, "тасдиқ" vs "undo".

15) Рӯйхати назоратии QA

Мавҷудият

• 'нақш = "муколама"', 'aria-modal = "ҳақиқӣ"', дуруст 'aria-labelledby/-describedby'.
• Корҳои доми фокус; фокус ба триггер бармегардад.
• Esc пӯшида мешавад (агар иҷозат дода шавад); Ҷадвал даврӣ аст.
• Муқоиса ≥ АА; ин на танҳо рангест, ки маънои онро медиҳад.

Рафтор

• TTFF ≤ 100 мс; аниматсия дар 120-180 мс/берун 80-140 мс.
• Заминро бидуни "ҷаҳидан" -и саҳифа ҳаракат кунед.
• Посбон дар шакли ифлос.
• Ҳолати банд, Retry/хатогиҳои дуруст.

Интерфейс

• Сарлавҳаи тоза ва як CTA ибтидоӣ.
• Тугмаи салиб/пӯшида дастрас аст.
• Андозаҳо мутобиқанд; дар мобилӣ - варақ бо ишорат.

Иҷро

• Порталҳо/z-индекс дурустанд; бе "интиқол".
• Оғози танбалӣ; танҳо трансформатсия/шаффофият аниматсия карда мешаванд.

16) Ҳуҷҷатгузорӣ дар системаи тарроҳӣ

Компонентҳо: 'Модал', 'Кашолакунӣ/Варақ', 'Тасдиқи диалог', 'Гвардияи истифоданашуда'.
Токенҳо: андозаҳо, шохаҳо, сояҳо, аниматсияҳо, паснамо, фокус-ҳалқа.
Роҳнамо: "Вақте ки модал ва кашиш", шакли нусхабардорӣ, амалҳои хатарнок (тасдиқ/бекор кардан), ҳаракат-қулф ва порталҳо, кам кардани ҳаракат.
Галереяро иҷро накунед: модалҳои воридшуда (накунед), шаклҳои дароз дар модалӣ (набошед), варақ барои васеъ кардани контекст (иҷро кунед).

Хулосаи мухтасар

Модалка - барои қарорҳои таҳти таваҷҷӯҳи пурра, ҷалб - васеъ кардани контекст бидуни шикастани ҷараён. Сохторро оддӣ, CTA якдилона ва мутақобиларо пешгӯишаванда ва дастрас нигоҳ доред. Ба иҷро эҳтиром гузоред, замина қулф кунед ва фокусро баргардонед. Дар сенарияҳои IGaming, ин бевосита ба эътимод таъсир мерасонад: тасдиқи гарав, пули нақд, интихоби усули пардохт ва KYC бояд одилона, зуд ва бехатар бошад.