通知・オーバーレイ
アクションシート
画面下からせり上がるiOS風のアクションシート。操作の一覧と、離れた位置の「キャンセル」を持ち、破壊的操作は朱色で示す。背景クリック・Escで閉じる。
プレビュー
クリック
操作クリック／タップで動きます。
実装メモ
プレビューは枠内に収めるため、シートと背景を position:absolute（ステージ基準）で実装しています。実際のページで画面下端に固定するときは position:fixed; left:0; right:0; bottom:0 に変え、body 直下など高い階層へ置いてください。iOS 実機では下端のセーフエリアを避けるため env(safe-area-inset-bottom) 分の padding を足すと自然です。
コード（コピーして使えます）
<div class="stage" id="stage">
<button class="open-btn" id="openSheet">共有・操作</button>
<div class="backdrop" id="backdrop" aria-hidden="true"></div>
<div class="sheet-wrap" id="sheetWrap" role="dialog" aria-modal="true" aria-label="操作を選択" aria-hidden="true">
<div class="sheet-group">
<p class="sheet-title">操作を選択</p>
<button class="sheet-item" id="firstItem">
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" aria-hidden="true">
<path d="M6 9.5l5-5M11 4.5h-3M11 4.5v3M4 7v5.5A1.5 1.5 0 005.5 14h6A1.5 1.5 0 0013 12.5V9" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
リンクをコピー
</button>
<button class="sheet-item">
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" aria-hidden="true">
<rect x="2.5" y="4" width="12" height="9" rx="1.5" stroke="currentColor" stroke-width="1.4"/>
<path d="M3 5l5.5 4L14 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
メールで送る
</button>
<button class="sheet-item">
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" aria-hidden="true">
<path d="M8.5 2.5c3.3 0 6 2.1 6 4.8s-2.7 4.8-6 4.8c-.7 0-1.4-.1-2-.3L3 13l.8-2.4C3 9.8 2.5 8.6 2.5 7.3c0-2.6 2.7-4.8 6-4.8z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/>
</svg>
メッセージで共有
</button>
<button class="sheet-item sheet-item--danger">
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" aria-hidden="true">
<path d="M3 4.5h11M6 4.5v-1a.6.6 0 01.6-.6h3.8a.6.6 0 01.6.6v1M5.5 4.5l.5 9M11 4.5l-.5 9M4 4.5l.6 9.3a.6.6 0 00.6.7h6.6a.6.6 0 00.6-.7L13 4.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
削除する
</button>
</div>
<button class="sheet-cancel" id="cancelSheet">キャンセル</button>
</div>
</div>