모달 및 출구 패널

1) 사용시기

모달 (배경과의 대화) - 행동 확인, 법적 동의, 위험한 작업, 짧은 형태 배경을 잠급니다.
Drawer/Sheet (풀 아웃 패널) -현장 확장 용: 객체 세부 정보, 속성 편집, 목록에서 선택, 보조 탐색. 배경이 보입니다 → 컨텍스트가 유지됩니다.

• 조치에 집중과 확인 → 모달이 필요한 경우.
• 컨텍스트를 저장하고 → Drawer에 대한 "병렬" 개요를 제공 할 때.

2) 구조와 치수

모달

제목 (필수) → 본문 → CTA (1 차/2 차/파괴).
치수: 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 차, 다음 2 차 ("취소") 및 필요한 경우 파괴.

위험한 행동을 위해 1 줄 설명을 추가하십시오. "행동은 돌이킬 수 없습니다. 10 초 이내에 취소 할 수 있습니다 (사용 가능한 경우) "

4) 행동과 상태

개장: 즉각적인 응답은 100 ms이고 애니메이션 120-180 ms입니다.
닫기: 열기 (80-140ms) 보다 빠르며 초점을 트리거로 되돌립니다.
바쁘다: 컨테이너의 'aria-waddy = "참", 다시 시도 잠금 장치가있는 버튼.
누락 (더러운 양식): 닫을 때 - 대화 상자 경고 ("저장되지 않은 변경 사항이 있습니다").
백그라운드에서 탈출/클릭: 위험하지 않은 대화 상자에 적합합니다. 중요한 - 명시 적 버튼 만.

5) 가용성 (A11y)

컨테이너: 'role = "dialogue"' 및 'aria-modal = "참"' (실제 모달).
제목은 'aria-labeledby' 를 통해 연결됩니다. 설명- 'aria-descripedby'.
내부의 포커스 트랩; 주요 초점은 헤더 또는 첫 번째 대화 형 항목에 있습니다.
닫은 후 원본 트리거로 초점을 돌립니다.
스크롤 배경 없음: '문서. 본문 {오버플로: 숨겨진; DOM의 나머지 부분에서} '또는' 비활성 '.
키보드 지원: 탭/시프트 + 탭은 주기적입니다. Esc는 닫힙니다 (스크립트가 금지되지 않는 한).
애니메이션을 비활성화/단순화하는 '감소 운동 선호' 를 고려하십시오.

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- 인덱스 문제가 적습니다.
처음 열었을 때 게으르게 마운트하거나 애니메이션을 닫은 후 마운트를 해제하십시오 (또는 오프 스크린으로 변환).
'변환/불투명도' 만 애니메이션합니다. 값 비싼 흐림/대형 그림자를 피하십시오.
백그라운드 스크롤 (스크롤 잠금) 을 잠그고 닫은 후 "점프" 하지 않도록 현재 위치를 유지하십시오.
서랍의 큰 목록은 가상화를 사용하십시오.

7) 모바일 패턴

빠른 동작/확인을위한 하단 시트: 제스처를 스 와이프하여 임계 값으로 닫습니다.
바닥에 끈적 끈적한 CTA; 왼쪽 상단에서 닫기 버튼.
안전 영역 들여 쓰기 (노치/제스처 영역).
화면 키보드가 CTA와 겹치지 않아야합니다. 레이아웃- "리프팅" 컨텐츠 또는 키보드 위의 고정 패널.

8) 모션 디자인

입력: 페이드 + 광 시프트 (모달: Y, 서랍: 외관 축을 따라). 120-180 ms.
출력: 짧음 (80-140ms), 완화 '입방-베지어 (0. 2,0,0. 2,1)`.
배경 불투명도는 0 → 0입니다. 4–0. 6. 맥동과 끝없는 눈부심이 없습니다.
'선호 감소 모션' 의 경우: 교대 없음, 페이드 만 있습니다.

9) 폐쇄 관리

안전한 운영을 위해서만 즉시 폐쇄하십시오.
오류가 발생하면 대화를 계속하고 이유와 재시도를 보여줍니다.
배경 실행-대화상자를 닫고 "우리는 배경에서 실행합니다"... 와 "역사" 섹션을 표시합니다.

10) 전형적인 iGaming 시나리오

10. 입찰 확인 1 개 (모달)

내용: 이벤트, 계수, 금액, 잠재적 이득, 계수 유효 기간.
버튼: "확인" (1 차), "취소".
지연 패턴> 3 초: 텍스트 "확인을 기다리는 중"...; 계수가 바뀌면 정직한 업데이트입니다.

10. 2 캐쉬 아웃 (모달/시트)

현재 현금 인출량과 창 타이머를 표시합니다.

확인 + 가능한 실행 취소 (규정이 허용되는 경우)

10. 3 결제 방법 선택 (Drawer)

커미션/ETA 방법 목록; 미니 양식의 → 를 선택합니다.

기본 방법 저장; 입력 손실없이 반환

10. 4 KYC (Drawer → Modal)

문서/프롬프트로드를위한 드로어.
불완전한로드로 닫으려고 할 때의 모달: 저장되지 않은 경고.

10. 5 책임있는 플레이 제한 (모달)

라디오 "Day/Week/Month", 금액 필드, 라인은 "...

11) 반 패턴

둥지 모달 (모달 이상 모달). 단일 대화 상자 또는 단계 순서를 사용하십시

콘텐츠를 정기적으로 볼 수있는 Modalka (더 나은 서랍/페이지).
숨겨진 십자가 또는 "마이크로 존" 에 의해서만 폐쇄.
위험한 행동 → "배경별로" 닫을 수있는 권한.
모달의 긴 모양 (→ 별도의 화면/패널로 이동).

초점이 트리거로 돌아 오지 않습니

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/배경 마감 대 "취소").
바쁜 스크립트의 오류/재생률입니다.
A/B: 모달 대 서랍, CTA 텍스트, 현장 순서, "확인" 대 "실행 취소".

15) QA 체크리스트

가용성

• 'role = "dialogie"', 'aria-modal = "참"', 올바른 'aria-labeledby/-describedby'.
• 포커스 트랩 작동; 초점이 트리거로 돌아갑니다.
• Esc는 닫힙니다 (허용되는 경우). 탭은 주기적입니다.
• 대조 AA; 의미를 전달하는 것은 단순한 색상이 아닙니다.

행동

• TTFF λ100 ms; 120-180 ms/out 80-140 ms의 애니메이션.
• 페이지를 "점프" 하지 않고 배경을 스크롤하십시오.
• 더러운 형태의 보호.
• 바쁜 상태, 올바른 재시도/오류.

인터페이스

• 클리어 헤더와 하나의 기본 CTA.
• 크로스/클로즈 버튼을 사용할 수 있습니다.
• 치수는 적응 적입니다. 모바일에서-제스처가 포함 된 시트.

성능

• 포탈/z- 인덱스가 정확합니다. "전송" 없이.
• 게으른 초기화; 변환/불투명도 만 애니메이션됩니다

16) 설계 시스템의 문서

구성 요소: 'Modal', 'Drawer/Sheet', 'ConfirmDialogue', 'UnsavedGuard'.
토큰: 치수, 들여 쓰기, 그림자, 애니메이션, 배경, 포커스 링.
가이드: "모달 대 서랍", 카피 라이팅 패턴, 위험한 동작 (확인/취소), 스크롤 잠금 및 포털, 감소 동작.
Do/Do n 't gallery: 중첩 된 모달 (하지 말 것), 모달의 긴 형태 (하지 말아야 함), 컨텍스트 확장을위한 시트 (do).

간략한 요약

완전히주의를 기울인 결정을 위해 Modalka는 흐름을 깨뜨리지 않고 상황을 확장합니다. 구조를 단순하게 유지하고 CTA를 모호하지 않으며 상호 작용을 예측하고 액세스 할 수 있습니다. 성능을 존중하고 배경을 잠그고 초점을 반환하십시오. iGaming 시나리오에서는 베팅 확인, 현금 인출, 결제 방법 선택 및 KYC가 공정하고 빠르며 안전해야합니다.