调制解调器和退出面板

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必须诚实，快速和安全。