ダイアログボックス

作ってみた

alert()

  • ダイアログボックスを表示

<!DOCTYPE HTML> 
<html lang="ja"> 
<head> 
<meta charset="UTF-8"> 
<title>注意を促す「アラートボックス」を表示する</title> 
</head> 
<body>

<script>
window.alert('保存しました');
</script>

</body>
</html>




<!DOCTYPE HTML> 
<html lang="ja"> 
<head> 
<meta charset="UTF-8"> 
<title>注意を促す「アラートボックス」を表示する</title> 
</head> 
<body>

<script>
window.alert('長いメッセージの場合は、\nエスケープシーケンスで改行します');
</script>

</body>
</html>


confirm()

  • 「true」「false」の判別をするダイアログボックを表示



<!DOCTYPE HTML> 
<html lang="ja"> 
<head> 
<meta charset="UTF-8"> 
<title>確認ボックスを表示して、分岐する</title> 
</head> 
<body>

<script>
if (confirm('保存しますか？')) {
	alert('保存しました');
} else {
	alert('キャンセルしました');
}
</script>

</body>
</html>






<!DOCTYPE HTML> 
<html lang="ja"> 
<head> 
<meta charset="UTF-8"> 
<title>確認ボックスを表示して、分岐する</title> 
</head> 
<body>

<script>
if (confirm('1月は別名「睦月」。同じように6月は「文月」である。（○:OK / ×:キャンセル)')) {
	alert('はずれ！　正解は水無月');
} else {
	alert('正解！');
}
</script>

</body>
</html>







<!DOCTYPE HTML> 
<html lang="ja"> 
<head> 
<meta charset="UTF-8"> 
<title>確認ボックスを表示して、分岐する</title> 
</head> 
<body>

<script>
var answer = confirm('送信しますか？');

alert('しばらくお待ちください...');

if (answer) {
	alert('送信しました');
} else {
	alert('キャンセルしました');
}
</script>

</body>
</html>


prompt()

  • 文字を入力するダイアログボックを表示

<!DOCTYPE HTML> 
<html lang="ja"> 
<head> 
<meta charset="UTF-8"> 
<title>確認ボックスを表示して、分岐する</title> 
</head> 
<body>

<script>
window.prompt('年齢を入力してください');
</script>

</body>
</html>




<!DOCTYPE HTML> 
<html lang="ja"> 
<head> 
<meta charset="UTF-8"> 
<title>確認ボックスを表示して、分岐する</title> 
</head> 
<body>

<script>
window.prompt("好きな花は？","ひまわり");
</script>

</body>
</html>