JavaScriptで確認ボックスを表示する

作ってみた

確認ダイアログボックス

JS課題11


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>JS課題11|確認ボックスを表示する</title>
<style>
<!--
*{
	margin:0;
	padding:0;
	}
body {
	color: #000;
	font-size: 0.875em;
	font-family:
	  "Hiragino Kaku Gothic Pro",
	　"ヒラギノ角ゴ Pro W3",
	　Meiryo, 
	　"メイリオ", 
	　Osaka, 
	　"MS P Gothic", 
	　"ＭＳ Ｐゴシック", 
	　sans-serif;
	text-align: center;
  color: fff;
	}
#container {
	width: 500px;
	margin: 0 auto;
	}
#header {
	color: #fff;
	height: 90px;
	background-color: #000;
	text-align: left;
	margin-top: 200px;
	}
#content {
	padding-top: 30px;
}
h1 {
	font-size: 1.6em;
	line-height: 1em;
	padding: 15px 0 0 50px;
}
h1 span {
	font-size: 0.5em;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>
<span>window.confirm(),if</span><br>
確認ボックスを表示する
</h1>
</div><!-- ▲#header -->
<div id="content">
<p>
 もう一度確認するには、このページをリロードしてください
</p>
<script>
<!--
if (confirm('保存しますか？')) {
  alert('保存しました');
} else {
  alert('キャンセルしました');
}
//-->
</script>
</div><!-- ▲#content -->
</div><!-- ▲#container -->
</body>
</html>


JS課題12


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>JS課題12|確認ボックスを表示して、分岐する</title>
<style>
<!--
*{
	margin: 0;
	padding: 0;
	}
body {
	color: #000;
	font-size: 0.875em;
	font-family:
	  "Hiragino Kaku Gothic Pro",
	　"ヒラギノ角ゴ Pro W3",
	　Meiryo, 
	　"メイリオ", 
	　Osaka, 
	　"MS P Gothic", 
	　"ＭＳ Ｐゴシック", 
	　sans-serif;
	text-align: center;
  color: fff;
	}
#container {
	width: 500px;
	margin: 0 auto;
	}
#header {
	color: #fff;
	height: 90px;
	background-color: #000;
	text-align: left;
	margin-top: 180px;
	}
#content {
	padding-top: 30px;
}
h1 {
	font-size: 1.6em;
	line-height: 1em;
	padding: 15px 0 0 50px;
}
h1 span {
	font-size: 0.5em;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>
<span>window.confirm(),if</span><br>
確認ボックスを表示して、分岐する
</h1>
</div><!-- ▲#header -->
<div id="content">
<p>
 もう一度確認するには、このページをリロードしてください
</p>
<script>
<!--
var age = prompt('年齢を入力してください');
if (age >= 20) {
 alert('アルコール類のご購入が可能です');
} else {
 alert('アルコール類はご購入いただけません');
}
//-->
</script>
</div><!-- ▲#content -->
</div><!-- ▲#container -->
</body>
</html>