モーダルと出口パネル

1）何を使うか

モーダル（背景との対話）-アクションの確認、法的同意、危険な操作、短いフォーム≤ 1-2フィールド。背景をロックします。
引き出し/シート（プルアウトパネル）-インプレイス拡張機能：オブジェクトの詳細、属性編集、リストからの選択、補助ナビゲーション。背景が表示されます→コンテキストが保存されます。

• アクションが濃度と確認を必要とする場合→モーダル。
• コンテキストを保存し、→Drawerの「パラレル」の概要を与えるとき。

2）構造および次元

モーダル（Modal）

タイトル（必須）→本体→CTA（プライマリ/セカンダリ/破壊）。
寸法：S （480-560 px）、 M （640-720 px）、 L （≤ 840 px）。モバイル-フルスクリーンシートで。

引き出し/シート

方向：右エッジ（デスクトップ、編集）、下（モバイル、アクション）、時には左（ナビゲーション）。
幅：360-480 （S）、 480-640 （M）、 640-800 （L）携帯電話で：90-100％の幅/高さ。

コンテンツの高さは常に制限され、内部をスクロールします。header/STAが修正されました。

3）コピーライティングとCTA

タイトル=アクション/意味：レートの確認、支払い方法の選択、KYC必須。
短いテキスト、1-2文。あいまいな数式は避けてください。
CTA： 1つのプライマリ、次のセカンダリ（「キャンセル」）と、必要に応じて、破壊的。

危険なアクションについては、1行の説明を追加します。10秒以内にキャンセルすることができます（可能な場合）"

4）行動と状態

開始：100ミリ秒≤即刻の応答、それからアニメーション120-180ミリ秒。
閉じる：開始（80-140ミリ秒）より速く、トリガーに焦点を戻して下さい。
Busy：コンテナの'aria-busy=「true」、再試行ロック付きボタン。
保存されていない（汚れたフォーム）：終了時-ダイアログ警告（「保存されていない変更があります」）。
エスケープ/バックグラウンドをクリック：危険ではないダイアログで許容されます。クリティカル-明示的なボタンのみ。

5）空室状況（A11y）

コンテナ：'role=「dialog」と'aria-modal=「true」（実際のモーダルの場合）。
タイトルは'aria-labelledby'を介してリンクされています。description-'aria-descripedby'。
中のフォーカストラップ；主な焦点はヘッダーまたは最初のインタラクティブアイテムです。
閉じた後に元のトリガーにフォーカスを返します。
スクロールの背景がありません：'ドキュメント。body {overflow： hidden；}'または'inert 'DOMの残りの部分。
キーボードのサポート：タブ/シフト+タブは周期的です；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インデックスの問題が少なくなります。
最初に開いたときに遅延してコンテンツをマウントし、アニメーションを閉じた後にマウントを解除します（またはオフスクリーンを翻訳します）。
'transform/opacity'のみをアニメーション化します。高価なぼかし/特大の影を避けてください。
バックグラウンドスクロール（スクロールロック）をロックし、閉じた後に「ジャンプ」しないように現在の位置を維持します。
引き出しの大きなリスト-仮想化を使用します。

7）モバイルパターン

クイックアクション/確認のためのボトムシート：ジェスチャーをスワイプして閉じます（しきい値）。
底の粘着性があるCTA；close button-左上から。
セーフエリアのインデント（ノッチ/ジェスチャーエリア）。
画面上のキーボードはCTAと重なってはいけません。レイアウト-「持ち上がる」コンテンツまたはキーボードの上の固定パネル。

8）モーションデザイン

入力：フェード+ライトシフト（モーダル：Yに沿って、引き出し：外観の軸に沿って）。120-180ミリ秒。

出力： より短い（80-140ミリ秒）、easing 'cubic-bezier （0。2,0,0.2,1)`.

Background-Opacityは0→0です。4–0.6.脈動と無限のまぶしさなし。
'prefers-reduced-motion'の場合：シフトなし、フェードのみ。

9）クロージングマネジメント

安全な操作のためだけの即時閉鎖。
エラーがある場合、私たちは対話にとどまり、理由を示し、再試行します。
background execution-ダイアログを閉じてトースト「We execute in the background……」、加えて「History」セクションを表示します。

10）典型的なiGamingシナリオ

10.1入札確認（モーダル）

内容：イベント、係数、量、潜在的な利得、係数の有効期間。
ボタン：「確認」（プライマリ）、「キャンセル」。
遅延パターン>3 s： text「確認を待っています……」；係数が変われば正直な更新。

10.2キャッシュアウト（モーダル/シート）

現在のキャッシュアウト量とウィンドウタイマーを表示します。
確認+可能な元に戻す（規制が許可されている場合）。

10.3お支払い方法の選択（引き出し）

手数料/ETAのメソッドのリスト。ミニフォームの→を選択します。

デフォルトのメソッドを保存します。入力を損なうことなくリターン

10.4 KYC（引き出し→モーダル）

ドキュメント/プロンプトをロードするための引き出し。
不完全な負荷で閉じる場合のモーダル：未保存についての警告。

10.5責任あるプレイ制限（モーダル）

ラジオ「Day/Week/Month」、 amountフィールド、line 「will take effect in……」……

11）アンチパターン

ネストされたモーダル（モーダル上のモーダル）。単一のダイアログまたはステップシーケンスを使用します。
コンテンツを定期的に閲覧するためのModalka（より良い引き出し/ページ）。
「マイクロゾーン」によってのみ隠されたクロスまたはクローズ。
危険なアクション→"by background'を閉じる権限。
モーダルの長い形状（→を別の画面/パネルに移動）。
トリガーにフォーカスが戻りません。

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/Complete Rate by modal：アクションを開いて完了した回数。
Time-to-Decision：開始からプライマリをクリックするまで。
Dismiss率と理由（Esc/background closeと「Cancel」）。
ビジースクリプトのエラー/再試行レート。
A/B：モーダルと引き出し、CTAテキスト、フィールド順序「、確認」と「元に戻す」。

15） QAチェックリスト

可用性について

• 'role=「dialog」'、 'aria-modal=「true」、正しい'aria-labelledby/-describby'。
• フォーカストラップは動作します。フォーカスはトリガーに戻ります。
• Escは閉じます（許可されている場合）。タブは周期的です。
• 対照≥ AA；意味を伝えるのは色だけではありません。

動作

• TTFF ≤ 100ミリ秒；120-180 ms/out 80-140 msのアニメーション。
• ページを「ジャンプ」せずにバックグラウンドをスクロールロックします。
• 汚れた形で保管されていないガード。
• ビジー状態、正しい再試行/エラー。

インターフェイス

• ヘッダーとプライマリCTAをクリアします。
• クロス/クローズボタンが利用可能です。
• 寸法は適応性があります。携帯電話で-ジェスチャーとシート。

パフォーマンス

• ポータル/z-indexが正しい；「伝達」なし。
• 遅延初期化；transform/opacityのみがアニメーション化されます。

16）設計システムにおけるドキュメンテーション

コンポーネント：'Modal'、 'Drawer/Sheet'、 'ConfirmDialog'、 'UnsavedGuard'。
トークン：寸法、インデント、影、アニメーション、背景、フォーカスリング。
ガイド：「モーダルと引き出しのとき」、コピーライティングパターン、危険なアクション（確認/取り消し）、スクロールロックとポータル、動きを減らします。
Do/Don 't gallery：ネストされたモーダル（don' t）、モーダルの長いフォーム（don 't）、コンテキストを展開するシート（do）。

概要

Modalka-完全な注意の下での決定のために、引き出し-フローを破ることなく、コンテキストを拡大します。構造をシンプルにし、CTAを明確にし、相互作用を予測可能でアクセス可能にします。パフォーマンスを尊重し、バックグラウンドをロックし、フォーカスを戻します。iGamingシナリオでは、これは直接信頼に影響します。ベットの確認、キャッシュアウト、支払い方法の選択、およびKYCは公正で迅速で安全でなければなりません。