モーダルウィンドウ - Web徒然なるままに

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>javascriptでモーダルウィンドウ</title>
		<style type="text/css">
		<!--
		.modal {
		display: none;
		position: fixed;
		z-index: 1;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		overflow: auto;
		background-color: rgba(0,0,0,0.5);
		}

		.modal-content{
		background-color: white;
		width: 500px;
		margin: 40% auto;
		}

		.modal_closebtn{
		font-size: 32px;
		font-weight: 200;
		}
		-->
		</style>
	</head>
	<body>
		<span id="btn">modal_display</span>

		<div id="modal" class="modal">
		  <div class="modal-content">
		    <div class="modal-body">
		      <button type="button" id="closeBtn" class="modal_closebtn">
	            <span>×</span>
	          </button>

		      <h1>hello</h1>

		    </div>
		  </div>
		</div>

	<script>
			var btn = document.getElementById('btn');
			var modal = document.getElementById('modal');

			btn.addEventListener('click',function(){
				modal.style.display	='block';
			});

			var closeBtn = document.getElementById('closeBtn');

			closeBtn.addEventListener('click', function() {
			  modal.style.display = 'none';
			});

			/* 外側の黒い部分を押してもモーダルが消える */
			window.addEventListener('click', function(e) {
			  if (e.target == modal) {
			    modal.style.display = 'none';
			  }
			});
	</script>
	</body>
</html>