Модалдар жана чыгуу панелдери

1) Качан колдонуу керек

Modal (бэкдроп менен диалог) - критикалык чечимдер жана толук көңүл бурууну талап кылган кыска маселелер үчүн: иш-аракеттерди ырастоо, укуктук макулдуктар, кооптуу операциялар, 1-2 талаанын ≤ кыска формалары. Фон бөгөттөйт.
Drawer/Sheet - контексттик кеңейтүү үчүн: объекттин деталдары, атрибуттарды оңдоо, тизмеден тандоо, жардамчы навигация. Фон көрүнүп турат → контексти сакталат.

• иш-аракет топтоо жана ырастоо керек болсо → Modal.
• Качан контекстин сактоо жана "параллелдүү" карап бериш керек → Drawer.

2) түзүлүшү жана өлчөмдөрү

Modal

аталышы (милдеттүү) → негизги текст → CTA-аймак (негизги/экинчи/Destructive).
Өлчөмү: S (480-560 px), M (640-720 px), L (≤ 840 px). Мобилдик - толук экран sheet.

Drawer / Sheet

Багыты: оң чети (десктоп, түзөтүү), түбү (мобайл, аракет), кээде сол (навигация).
туурасы: 360-480 (S), 480-640 (M), 640-800 (L). Мобилдик боюнча: 90-100% туурасы/бийиктиги.

мазмундун бийиктиги ар дайым чектелген, ичинде - scroll; баш/STA белгиленген.

3) Copyright жана CTA

Аталышы = аракет/мааниси: "Ченди ырастоо", "Төлөм ыкмасын тандоо", "KYC талап кылынат".
Текст кыска, 1-2 сүйлөм. Бүдөмүк формулалардан алыс болуңуз.
CTA: бир Primary, кийинки Secondary ("жокко чыгаруу") жана, зарыл болсо, Destructive.

Тобокелдүү аракеттер үчүн 1-сапка түшүндүрмө кошуңуз: "Аракет кайтарылгыс. Сиз 10 секунданын ичинде жокко чыгара аласыз (эгер бар болсо)"

4) жүрүм-туруму жана абалы

Ачуу: тез жооп ≤ 100 мс, андан кийин 120-180 мс.
Жабуу: тезирээк ачуу (80-140 ms), триггерге буруу.
Busy: 'aria-busy = "true"' контейнерде, кайталоо баскычы.
Unsaved (кир формасы): жабылганда - диалог-эскертүү ("Сакталбаган өзгөрүүлөр бар").
Escape/фон чыкылдатуу: коопсуз диалогдор үчүн жарактуу; үчүн - ачык баскычтар гана.

5) Жеткиликтүүлүк (A11y)

Контейнер: 'role = "dialog' 'жана' aria-modal =" true "'(учурдагы модалк үчүн).
баш 'aria-labelledby' аркылуу байланышкан; сүрөттөлүшү - 'aria-describedby'.
Focus trap ичинде; негизги көңүл - аталышында же биринчи интерактивдүү элементинде.
Жабылгандан кийин баштапкы триггерге көңүл буруу.
Эч кандай фон: 'document. body {overflow: hidden;} 'же' inert 'калган DOM.
Клавиатураны колдоо: Tab/Shift + Tab циклдери; Esc жабат (эгерде сценарийде тыюу салынбаса).
'prefers-reduced-motion' эске алуу: өчүрүү/жөнөкөйлөтүү Animation.

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 менен көйгөйлөр азыраак.
Биринчи ачылганда контентти жалкоо монтаждаңыз, анимациядан кийин демонтаждаңыз (же offscreen которуңуз).
Анимация гана 'transform/opacity'; чоң өлчөмдөгү кымбат блур/көлөкөлөрдөн качыңыз.
кулпу көшөгөнү (scroll-lock), жабылгандан кийин "секирип" эмес, учурдагы абалын сактап.
drawer ири тизмелери үчүн - виртуалдаштыруу колдонуу.

7) Мобилдик үлгүлөрү

Bottom sheet тез иш-аракеттер/ырастоо үчүн: Swipe кыймыл жабуу үчүн (босогосу менен).
Sticky-CTA төмөнкү; жабуу баскычы - жогору сол.
Safe-area чегинүү (notch/gesture areas).
Экран клавиатурасы CTAны жабууга тийиш эмес; layout - "көтөрүү" мазмуну же клавиатуранын үстүндөгү туруктуу панель.

8) кыймыл-дизайн

Кирүү: fade + жеңил жылыш (modal: by Y, drawer: көрүнүү огунда). 120-180 ms.
Чыгаруу: кыска (80-140 ms), easing 'cubic-bezier (0. 2,0,0. 2,1)`.
Фон (backdrop): тунук эмес 0 → 0. 4–0. 6. Эч кандай толкундар жана чексиз жаркыраган.
'prefers-reduced-motion' үчүн: жылышы жок, fade гана.

9) Жабууну башкаруу

Коопсуз операцияларда гана токтоосуз жабуу.
Эгер ката болсо, биз диалогдо калып, себебин жана Retry көрсөтөт.
Фон аткарууда - диалогду жабуу жана "Фонда аткарабыз" тостун көрсөтүлүшү..., плюс "Тарых" бөлүмү.

10) iGaming типтүү жагдайлар

10. 1 Ченди ырастоо (Modal)

Мазмуну: окуя, коэффициент, сумма, потенциалдуу утуш, коэффициенттин колдонуу мөөнөтү.
Баскычтар: "ырастоо" (негизги), "жокко чыгаруу".
Үлгү кечигүү> 3 с: текст "ырастоо күтүп"...; өзгөргөндө - чынчыл жаңыртуу.

10. 2 Кэшаут (Modal/Sheet)

Учурдагы кэшаут суммасын жана терезенин таймерин көрсөтүү.
Тастыктоо + мүмкүн Undo (эгерде регламент уруксат берсе).

10. 3 Төлөм ыкмасын тандоо (Drawer)

Комиссиялар/ETA менен ыкмалардын тизмеси; тандоо → мини-форма.
демейки ыкмасын сактоо; киргизилген маалыматтарды жоготпостон кайтарып берүү.

10. 4 KYC (Drawer → Modal)

Документтерди/кеңештерди жүктөө үчүн Drawer.
Modal бүтпөгөн жүктөө менен жабууга аракет кылып жатканда: сакталбаган эскертүү.

10. 5 жоопкерчиликтүү оюн чеги (Modal)

Радио "Day/Week/Ай", сумма талаасы, "аркылуу күчүнө кирет"....

11) Анти-үлгүлөрү

Ички модалдар (modal үстүнөн modal). Бир диалог же кадам ырааттуулугун колдонуңуз.
Кадимки мазмунду көрүү үчүн модалка (жакшы drawer/бет).
Жашыруун крест же "микрозон" боюнча гана жабуу.
Тобокелдүү иш-аракет → "фонунда" жабуу уруксаты.
Модалкада узун форма (→ өзүнчө экранга/панелге алып чыгыңыз).
Триггерге көңүл буруунун жоктугу.

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) Метрика жана эксперименттер

Open Rate/Completion Rate: канча ачылып, иш-аракет аяктады.
Time-to-Decision: Primary боюнча ачылыштан чыкылдатуу.
Dismiss Rate жана себептери (Esc/фон vs "жокко чыгаруу" боюнча жабуу).
Error/Retry Rate busy-жагдайда.
A/B: modal vs drawer, CTA тексти, талаа тартиби, "ырастоо" vs "undo".

15) QA-чек тизмеси

Жеткиликтүүлүк

• 'role = "dialog"', 'aria-modal = "true"', туура 'aria-labelledby/-describedby'.
• Focus trap иштейт; фокус триггерге кайтып келет.
• Esc жабат (уруксат берилсе); Tab циклдүү.
• Контраст ≥ AA; түс гана маани бербейт.

Жүрүм-туруму

• TTFF ≤ 100 мс; анимация in 120-180 мс/out 80-140 мс.
• Scroll-lock "секирүү" бет жок.
• кир түрүндө Unsaved-guard.
• Busy-абалы, туура Retry/каталар.

Интерфейс

• Так аталышы жана бир Primary-CTA.
• Крестик/" Жабуу "баскычы бар.
• өлчөмдөрү ылайыктуу; мобилдик - sheet менен ишарат.

Аткаруу

• Порталдар/z-индекс туура; эч кандай "жарык".
• Жалкоо демилге; transform/opacity гана жанданат.

16) Дизайн системасында документтер

Компоненттери: 'Modal', 'Drawer/Sheet', 'ConfirmDialog', 'UnsavedGuard'.
Токендер: өлчөмдөр, чегинүүлөр, көлөкөлөр, анимациялар, backdrop, focus-ring.
Gaydes: "Качан modal vs drawer", копирайтинг үлгүлөрү, кооптуу иш-аракеттер (confirm/undo), scroll-lock жана portals, reduce-motion.
Do/Don 't-галерея: nested modals (don' t), узун түрлөрү модалк (don 't), контекст кеңейтүү үчүн sheet (do).

Кыскача резюме

Modalka - толук кулак чечүү үчүн, drawer - агым үзүлүшү жок контекстти кеңейтүү үчүн. жөнөкөй структурасын сактоо, CTA - так жана өз ара - алдын ала жана жеткиликтүү. Аткарууну урматтаңыз, фонду бөгөттөп, фокусту кайтарыңыз. iGaming сценарийлеринде бул түздөн-түз ишенимге таасир этет: чендерди ырастоо, кэшаут, төлөм ыкмасын тандоо жана KYC чынчыл, тез жана коопсуз болушу керек.