ダイアログ デザイン見本
JavaScriptのネイティブダイアログ（alert・confirm・prompt）の実装デモ。コピーしてすぐに使えるHTML・JSのコードを掲載。
① alert() — メッセージ表示
HTML
<button id="alert-btn">Alert</button>JS
var btn = document.getElementById('alert-btn');
btn.addEventListener('click', function() {
alert('メッセージを表示します。');
});
alert()
ユーザーにメッセージを表示するだけのシンプルなダイアログです。OKボタンのみ表示され、戻り値はありません。表示したいメッセージを引数として渡すだけで実装できます。
② confirm() — OK / キャンセル選択
HTML
<button id="confirm-btn">Confirm</button>
<p id="confirm-msg"></p>JS
var btn = document.getElementById('confirm-btn');
var msg = document.getElementById('confirm-msg');
btn.addEventListener('click', function() {
var ans = window.confirm('続けますか？');
if (ans) {
msg.textContent = '選択: OK（true）';
} else {
msg.textContent = '選択: キャンセル（false）';
}
});
confirm()
OK / キャンセルの2択を表示するダイアログです。OKを選ぶとtrueを、キャンセルを選ぶとfalseを返します。この戻り値をif文で判定することで、ユーザーの選択に応じた処理の分岐が可能です。
③ prompt() — テキスト入力ダイアログ
HTML
<button id="prompt-btn">Prompt</button>
<p id="prompt-msg"></p>JS
var btn = document.getElementById('prompt-btn');
var msg = document.getElementById('prompt-msg');
btn.addEventListener('click', function() {
var ans = window.prompt('お名前を入力してください', '');
if (ans !== null && ans !== '') {
msg.textContent = '入力内容: ' + ans;
} else if (ans === '') {
msg.textContent = '何も入力されませんでした。';
} else {
msg.textContent = 'キャンセルされました（null）。';
}
});
prompt()
テキスト入力ボックス付きのダイアログです。第1引数にメッセージ、第2引数に入力欄の初期値を指定します。入力されたテキストが戻り値として返され、キャンセルまたはESCキーを押した場合はnullを返します。
注意点：alert・confirm・promptはブラウザのUIをブロックするため、頻繁に使用するとユーザー体験を損ないます。重要な確認処理以外では、モーダルウィンドウやポップアップなどのカスタムUIの使用も検討してください。
当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。
あわせて読みたい
Webデザイン・UIコンポーネント集（HTML/CSS/JS）
Webサイトやアプリで使われている『Webデザイン』や『UI』の実装例やデザイン例を纏めました。（随時更新中）実装方法などは別記事にコードや実装ポイントを公開してい…