調制解調器和退出面板

1）什麼時候使用

Modal（與後門對話）-針對需要充分註意的關鍵解決方案和短期任務：行為確認，法律同意，危險操作，簡短形式≤ 1-2字段。鎖定背景。
Drawer/Sheet（退出面板）-用於上下文擴展：對象部件、屬性編輯、列表選擇、輔助導航。背景是可見的→上下文仍然存在。

• 如果活動需要集中註意力和確認→模塊。
• 當需要保存上下文並給出「並行」Drawer →概述時。

2）結構和尺寸

Modal

標題（強制性）→ → CTA區域（初級/中級/毀滅性）的主要文本。
尺寸：S（480-560 px）、M（640-720 px）、L（≤ 840 px）。移動設備上有全屏表。

Drawer / Sheet

方向：右邊緣（臺式機，編輯），非正式（移動，動作），有時左邊（導航）。
寬度：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毫秒），我們把註意力帶回觸發器。
Busy： 'aria-busy=容器上的「true」，重復鎖定按鈕。
Unsaved（臟表單）：當關閉-對話警告時（「有未保存的更改」）。
背面/點擊：允許非危險對話；對於關鍵-只有顯式按鈕。

5）可用性（A11y）

容器：'role='dialog'和'aria-modal='true'（對於真正的調制解調器）。
標題通過「aria-labelledby」鏈接。描述是「aria-describedby」。
內部聚焦陷阱；主要焦點是標題或第一個交互元素。
關閉後,重新關註原始觸發器。
沒有背景滾動：'文檔。body {overflow： hidden；}或「inert」在DOM的其余部分。
鍵盤支持：Tab/Shift+Tab是循環的；Esc關閉（除非腳本上禁止）。
考慮到「prefers-reduced-motion」：禁用/簡化動畫。

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索引問題。
首次打開時,掛載內容懶惰,關閉動畫後卸載（或翻譯offscreen）。
僅制作「轉換/操作性」動畫；避免大尺寸的昂貴斑點/陰影。
鎖定背景滾動（滾動鎖）,保持當前位置,以便在關閉後不會「跳躍」。
對於繪圖器中的大列表-使用虛擬化。

7）移動模式

底部表用於快速動作/確認：向下滑動以關閉（帶閾值）的手勢。
底部的Sticky-CTA；關閉按鈕-左上方。
安全區（notch/gesture areas）。
屏幕鍵盤不應與CTA重疊；布局-內容的「提升」或鍵盤上方的固定面板。

8）運動設計

輸入：fade+易於移動（modal：通過Y，drawer：通過外觀軸）。120-180毫秒。

輸出： 更短（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）

內容：事件，系數，總和，潛在收益，系數有效期。
按鈕：「確認」（primary）,「取消」。
延遲模式>3 c：「等待確認……」；當系數發生變化時-誠實的升級。

10.2現金（Modal/Sheet）

顯示當前現金和窗口計時器金額。
確認+可能的Undo（如果法規允許）。

10.3選擇支付方法（Drawer）

帶有傭金/ETA的方法列表；→選擇迷你形狀。
保存默認方法；返回時不會丟失輸入的數據。

10.4 KYC (Drawer → Modal)

Drawer用於下載文檔/提示。
嘗試以未完成的下載關閉時,Modal：警告未保存。

10.5負責任遊戲限制（Modal）

電臺「Day/Week/Mont」，總和字段，「將通過……」生效。

11）反模式

嵌套調制解調器（調制解調器頂部）。使用一個對話框或一系列步驟。
用於常規內容查看的調制解調器（優於繪圖/頁面）。
僅通過「微型」隱藏十字架或閉合。
有風險的行動→允許關閉「通過背景」。
調制解調器中的長形狀（→帶到單獨的屏幕/面板）。
沒有焦點返回到觸發器。

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按調制解調器：有多少打開並完成了操作。
時間到決策：從打開到點擊小學。
Dismiss Rate和原因（Esc/fon vs 「Cancel」關閉）。
busy腳本中的錯誤/回歸率。
A/B：modal vs drawer，CTA文本，字段順序，「確認」vs 「undo」。

15） QA支票清單

可用性

• 'role='dialog'，'aria-modal='true'，正確的'aria-labelledby/- describedby'。
• 聚焦陷阱工作；焦點回到觸發器。
• Esc關閉（如果允許）；Tab是循環的。
• AA ≥對比；不僅僅是色彩傳達意義。

行為

• TTFF ≤ 100毫秒；在120-180 ms/out 80-140 ms中動畫。
• 沒有頁面的「跳躍」的滾動鎖定背景。
• 雜亂無章的護衛。
• 繁忙狀態,正確的返回/錯誤。

接口

• 清晰的標題和一個Primary-CTA。
• Crestic/Close按鈕可用。
• 尺寸是適應性的；在移動設備上-帶有手勢的表。

表演

• 門戶/z-index是正確的；沒有「鉆孔」。
• 懶惰的初始化；僅使用transform/opacity動畫。

16）設計系統中的文檔

組件：「Modal」，「Drawer/Sheet」，「ConfirmDialog」，「UnsavedGuard」。
令牌：尺寸,縮進,陰影,動畫,背景,焦點環。
Gaids：「modal vs drawer」，文案寫作模式，冒險動作（confirm/undo），scroll鎖定和門戶，reduce-motion。
Do/Do n't galler： nested modals （do n't）, long forms in modalk （do n't）, sheet to extension上下文擴展（do）。

簡短摘要

調制解調器-用於完全關註的決策,drawer-用於擴展上下文而不中斷流。保持結構簡單，CTA是明確的，互動是可預測和可訪問的。尊重表演，阻擋背景，帶回焦點。在iGaming場景中，這直接影響信任：利率確認，現金，支付方法的選擇以及KYC必須誠實，快速和安全。