<div class="container">
	<a href="#" class="modal_link" id="js-modal_link">Open Modal</a>
</div>
.container {
	position: relative;
	width: 200px;
	margin: 50px auto;
}
.modal_link {
	display: block;
	width: 200px;
	height: 50px;
	background: #008200;
	border-radius: 5px;
	font-size: 18px;
	font-weight: bold;
	line-height: 50px;
	color: #fff;
	text-decoration: none;
	text-align: center;
}
#overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.7);
	opacity: 0;
}

#modal_contents {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 200px;
	transform: translate(-50%, -50%);
	background: #fff;
}
(function() {
	'use strict';
	
	// マッチしたid名を持つ要素を取得、変数の定義
	var modalLink, 
			overlay,
			modalContents,
			close;
	
	modalLink	= document.getElementById('js-modal_link');
	
	// オーバーレイの要素を生成
	// <div id="overlay" style="transistion: opacity 0.3s"></div>
	overlay = document.createElement('div');
	overlay.setAttribute('id', 'overlay');
	overlay.style.transition = 'opacity 0.3s';
	
	// モーダルボックスを生成
	// <div id="modal_contents”></div>
	modalContents = document.createElement('div');
	modalContents.setAttribute('id', 'modal_contents');
	
	// クローズリンク生成
	// <a id="close” href="#">CLOSE</a>
	close = document.createElement('a');
	close.setAttribute('id', 'close');
	close.setAttribute('href', '#');
	close.innerHTML = 'CLOSE';
	
	// モーダルボックス内にクローズリンクを追加
	// <div id="modal_contents”>
	// 	<a id="close” href="#">CLOSE</a>
	// </div>
	modalContents.appendChild(close);
	
	// オーバーレイ内にモーダルボックスを追加
	// <div id="overlay”>
	//  <div id="modal_contents">
	// 	 <a id="close” href="#">CLOSE</a>
	//  </div>
	// </div>
	overlay.appendChild(modalContents);
	
	// モーダルボタンクリック時に<body>閉じタグ直前にオーバーレイ要素を追加し、コンテンツを表示
	modalLink.addEventListener('click', function(e) {
		e.preventDefault();
		document.body.appendChild(overlay);
		overlay.style.display = 'block';
		setTimeout(function() {
			overlay.style.opacity = '1';
		}, 100);
	});
	
	// オーバーレイクリック時オーバーレイを削除
	overlay.addEventListener('click', function() {
		this.style.opacity = '0';
		setTimeout(function() {
			this.remove();
		}.bind(this), 300);
	});
	
	// モーダルコンテンツ内クリック時にモーダルウィンドウが閉じるのを防ぐ(親要素への伝播を止める)
	modalContents.addEventListener('click', function(e) {
		e.stopPropagation();
	});
	
	// クローズリンククリック時にオーバーレイを削除する
	close.addEventListener('click', function(e) {
		e.preventDefault();
		overlay.style.opacity = '0';
		setTimeout(function() {
			overlay.remove();
		}, 300);
	});
}());

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js