通知・オーバーレイ
モーダル
ボタンでフェード＋スケールインしながらモーダルが中央に開く。背景クリック・×ボタン・Escキーで閉じる。
プレビュー
クリック
操作クリック／タップで動きます。
実装メモ
プレビューは枠内に収めるため、オーバーレイを position:absolute（ステージ基準）で実装しています。実際のページで画面全体に重ねるときは position:fixed に変え、body 直下など高い階層へ置いてください。
コード（コピーして使えます）
<div class="stage" id="stage">
<button class="open-btn" id="openModal">モーダルを開く</button>
<div class="backdrop" id="backdrop" aria-hidden="true"></div>
<div class="modal" id="modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle" aria-hidden="true">
<div class="modal-header">
<p class="modal-title" id="modalTitle">確認</p>
<button class="close-btn" id="closeModal" aria-label="閉じる">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<line x1="3" y1="3" x2="13" y2="13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<line x1="13" y1="3" x2="3" y2="13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</button>
</div>
<p class="modal-body">この操作を続けますか？<br>変更内容は保存されます。</p>
<div class="modal-footer">
<button class="btn-cancel" id="cancelModal">キャンセル</button>
<button class="btn-ok">OK</button>
</div>
</div>
</div>