モーダル Modal Dialog
画面を覆うオーバーレイ上にコンテンツを表示するダイアログ。ユーザーの確認操作を求める時に使用。
ライブデモ
ソースコード
<button class="demo-modal-open">モーダルを開く</button>
<div class="demo-modal-overlay" style="display:none;">
<div class="demo-modal-dialog" role="dialog" aria-modal="true" aria-labelledby="demo-modal-title">
<div class="demo-modal-header">
<h3 class="demo-modal-title" id="demo-modal-title">確認</h3>
<button class="demo-modal-close" aria-label="閉じる">×</button>
</div>
<div class="demo-modal-body">
<p>この操作を実行しますか？この操作は取り消せません。</p>
</div>
<div class="demo-modal-footer">
<button class="demo-modal-btn cancel">キャンセル</button>
<button class="demo-modal-btn confirm">確認する</button>
</div>
</div>
</div>.demo-modal-open { position: relative;
padding: 10px 20px; background: var(--ui-primary); color: #fff;
border: none; border-radius: 8px; font-size: 14px; cursor: pointer;
transition: opacity 0.2s;
}
.demo-modal-open:hover { opacity: 0.85; }
.demo-modal-overlay { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.5); align-items: center; justify-content: center; }
.demo-modal-dialog {
background: #fff; border-radius: 14px; width: 90%; max-width: 420px;
box-shadow: 0 8px 30px rgba(0,0,0,0.2); animation: demo-modal-scale-in 0.25s ease-out;
}
.demo-modal-header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px; border-bottom: 1px solid #e5e7eb;
}
.demo-modal-title { margin: 0; font-size: 16px; color: #111; }
.demo-modal-close {
background: none; border: none; font-size: 22px; color: #999;
cursor: pointer; width: 32px; height: 32px; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
}
.demo-modal-close:hover { background: #f3f4f6; }
.demo-modal-body { padding: 20px; font-size: 14px; color: #555; line-height: 1.6; }
.demo-modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid #e5e7eb; }
.demo-modal-btn {
padding: 8px 18px; border-radius: 8px; font-size: 13px;
cursor: pointer; border: none; font-weight: 600;
}
.demo-modal-btn.cancel { background: #f3f4f6; color: #333; }
.demo-modal-btn.cancel:hover { background: #e5e7eb; }
.demo-modal-btn.confirm { background: var(--ui-primary); color: #fff; }
.demo-modal-btn.confirm:hover { opacity: 0.85; }
@keyframes demo-modal-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes demo-modal-scale-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
(function(){
const overlay = document.querySelector('.demo-modal-overlay');
function open() { overlay.style.display = 'flex'; }
function close() { overlay.style.display = 'none'; }
document.querySelector('.demo-modal-open').addEventListener('click', open);
document.querySelector('.demo-modal-close').addEventListener('click', close);
document.querySelector('.demo-modal-btn.cancel').addEventListener('click', close);
document.querySelector('.demo-modal-btn.confirm').addEventListener('click', close);
overlay.addEventListener('click', function(e) { if (e.target === overlay) close(); });
})();AIプロンプト
Basic
モーダルダイアログをHTML/CSS/JSで作ってください。ボタンを押すとオーバーレイ付きのダイアログが表示されます。
Custom
以下の仕様でモーダルを実装してください。 - フェードイン + スケールアップのアニメーション - プライマリカラー: #2563eb - 背景オーバーレイクリックで閉じる - 閉じるボタン（×） - ヘッダー・ボディ・フッターの3セクション - フッターにキャンセル/確認ボタン - スクロール可能なコンテンツ対応
Advanced
アクセシビリティ完全対応のモーダルを実装してください。 - role="dialog" + aria-modal="true" - aria-labelledby, aria-describedby の設定 - フォーカストラップ（Tab/Shift+Tab がモーダル内で循環） - ESCキーで閉じる - 開くときに前のフォーカス位置を記録、閉じたら戻す - bodyスクロールロック（scroll-behavior考慮） - アニメーションはprefers-reduced-motion対応 - ネスト（モーダルの中からモーダルを開く）対応 - <dialog>要素ベースの実装