確認ダイアログ Confirmation Dialog
ユーザーに操作の確認を求めるダイアログ。削除や送信など重要なアクションの前に表示する。
ライブデモ
ソースコード
<div class="demo-confirmdialog">
<div class="demo-confirmdialog-buttons">
<button class="demo-confirmdialog-open" data-type="delete">削除を実行</button>
<button class="demo-confirmdialog-open demo-confirmdialog-open-outline" data-type="submit">送信を確認</button>
</div>
<div class="demo-confirmdialog-overlay" role="dialog" aria-modal="true" aria-labelledby="demo-cd-title">
<div class="demo-confirmdialog-box">
<div class="demo-confirmdialog-icon"></div>
<h3 class="demo-confirmdialog-title" id="demo-cd-title"></h3>
<p class="demo-confirmdialog-message"></p>
<div class="demo-confirmdialog-actions">
<button class="demo-confirmdialog-cancel">キャンセル</button>
<button class="demo-confirmdialog-confirm"></button>
</div>
</div>
</div>
<div class="demo-confirmdialog-result"></div>
</div>.demo-confirmdialog { position: relative; }
.demo-confirmdialog-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.demo-confirmdialog-open {
padding: 10px 20px; border: none; border-radius: 8px; font-size: 13px;
font-weight: 600; cursor: pointer; background: #ef4444; color: #fff;
transition: opacity 0.2s;
}
.demo-confirmdialog-open:hover { opacity: 0.9; }
.demo-confirmdialog-open-outline {
background: transparent; color: var(--ui-primary);
border: 2px solid var(--ui-primary);
}
.demo-confirmdialog-open-outline:hover { background: color-mix(in srgb, var(--ui-primary) 8%, transparent); opacity: 1; }
.demo-confirmdialog-overlay { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.5); align-items: center; justify-content: center; animation: demo-confirmdialog-fadein 0.2s ease; }
.demo-confirmdialog-overlay.open { display: flex; }
@keyframes demo-confirmdialog-fadein { from { opacity: 0; } to { opacity: 1; } }
.demo-confirmdialog-box {
background: #fff; border-radius: 16px; padding: 24px; max-width: 380px; width: 90%;
box-shadow: 0 16px 48px rgba(0,0,0,0.2); text-align: center;
animation: demo-confirmdialog-scalein 0.2s ease;
}
@keyframes demo-confirmdialog-scalein { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.demo-confirmdialog-icon {
width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 16px;
display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.demo-confirmdialog-icon.delete { background: #fef2f2; color: #ef4444; }
.demo-confirmdialog-icon.submit { background: color-mix(in srgb, var(--ui-primary) 10%, transparent); color: var(--ui-primary); }
.demo-confirmdialog-title { font-size: 16px; font-weight: 700; color: #333; margin: 0 0 8px; }
.demo-confirmdialog-message { font-size: 13px; color: #6b7280; margin: 0 0 20px; line-height: 1.6; }
.demo-confirmdialog-actions { display: flex; gap: 8px; justify-content: center; }
.demo-confirmdialog-cancel, .demo-confirmdialog-confirm {
padding: 10px 24px; border: none; border-radius: 8px; font-size: 14px;
font-weight: 600; cursor: pointer; transition: opacity 0.2s;
}
.demo-confirmdialog-cancel { background: #f3f4f6; color: #333; }
.demo-confirmdialog-cancel:hover { background: #e5e7eb; }
.demo-confirmdialog-confirm.delete { background: #ef4444; color: #fff; }
.demo-confirmdialog-confirm.submit { background: var(--ui-primary); color: #fff; }
.demo-confirmdialog-confirm:hover { opacity: 0.9; }
.demo-confirmdialog-result {
margin-top: 12px; font-size: 13px; font-weight: 600; min-height: 20px;
color: var(--ui-primary);
}
(function(){
var overlay = document.querySelector('.demo-confirmdialog-overlay');
var icon = overlay.querySelector('.demo-confirmdialog-icon');
var title = overlay.querySelector('.demo-confirmdialog-title');
var message = overlay.querySelector('.demo-confirmdialog-message');
var confirm = overlay.querySelector('.demo-confirmdialog-confirm');
var cancel = overlay.querySelector('.demo-confirmdialog-cancel');
var result = document.querySelector('.demo-confirmdialog-result');
var dialogs = {
delete: { icon: '⚠', iconClass: 'delete', title: '本当に削除しますか？', message: 'この操作は元に戻せません。関連するデータも全て削除されます。', action: '削除する', actionClass: 'delete', result: '削除しました' },
submit: { icon: '✉', iconClass: 'submit', title: '送信してよろしいですか？', message: '入力内容を確認のうえ送信してください。送信後に内容を変更することはできません。', action: '送信する', actionClass: 'submit', result: '送信しました' }
};
document.querySelectorAll('.demo-confirmdialog-open').forEach(function(btn) {
btn.addEventListener('click', function() {
var d = dialogs[this.dataset.type];
icon.innerHTML = d.icon; icon.className = 'demo-confirmdialog-icon ' + d.iconClass;
title.textContent = d.title;
message.textContent = d.message;
confirm.textContent = d.action; confirm.className = 'demo-confirmdialog-confirm ' + d.actionClass;
overlay.classList.add('open');
result.textContent = '';
cancel.focus();
});
});
function close() { overlay.classList.remove('open'); }
cancel.addEventListener('click', close);
confirm.addEventListener('click', function() {
var type = icon.classList.contains('delete') ? 'delete' : 'submit';
result.textContent = dialogs[type].result;
close();
});
overlay.addEventListener('click', function(e) { if (e.target === overlay) close(); });
document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && overlay.classList.contains('open')) close(); });
})();AIプロンプト
Basic
確認ダイアログをHTML/CSS/JSで作ってください。ボタンを押すと確認メッセージが表示され、OKまたはキャンセルを選べます。
Custom
以下の仕様で確認ダイアログを実装してください。 - オーバーレイ付きモーダル表示 - アイコン付きのダイアログ（警告/確認で使い分け） - プライマリカラー: #2563eb - 削除系は赤ボタン、送信系はプライマリカラーボタン - ESCキーで閉じる - 外側クリックで閉じる - スケールインアニメーション
Advanced
アクセシビリティ対応の確認ダイアログを実装してください。 - role="alertdialog" + aria-modal="true" の適切な設定 - aria-labelledby / aria-describedby でタイトルと説明文をリンク - フォーカストラップ（ダイアログ内でTabキーが循環） - 開閉時のフォーカス管理（キャンセルボタンにフォーカス → 閉じた後はトリガーに戻す） - ESCキーでキャンセル扱いで閉じる - prefers-reduced-motion 対応 - 確認ボタンを意図的に目立たなくする（誤操作防止） - ダイアログ表示中のbodyスクロールロック