javascriptを使わずにcssだけでモーダルウィンドウを作る方法

モーダルウィンドウをjavascriptなどを使って作る場合が多いと思いますがcssだけで作る方法があります。

cssだけで作ることでjsの処理なく動作が軽くなる点やシンプルで修正もしやすくなるといったメリットがあります。

cssだけでモーダルウィンドウを作る方法

html

<div id="modal" class="modal">
    <div class="modal-content">
        <h1>CSSで作るモーダル</h1>
        <p>モーダル内のテキストです。</p>
	<a href="#" class="modal-close">閉じる</a>
    </div>
</div>

css

.wrapper {
	padding: 100px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #eee;
}

.wrapper .modal-btn {
	text-decoration: none;
	padding: 20px;
	background: #fff;
	color: #000;
}

.modal {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .5);
	transition: all .6s;
}

.modal:target {
	visibility: visible;
	opacity: 1;
}

.modal-content {
	position: relative;
	width: 400px;
	max-width: 90%;
	background: #fff;
	padding: 20px;
	max-height: 400px;
	overflow-y: auto;
}

.modal-close {
	position: absolute;
	top: 10px;
	right: 10px;
}

疑似要素の「 :target 」を使うことでモーダルウィンドウを再現することができます。

サンプル