【コピペOK】CSSでポップアップウィンドウを作ろう！ / HTML・CSS

Contents

ポップアップウィンドウとは

ポップアップウィンドウとは、ウェブページのリンクやボタンをクリックして、新しいページが別の小さなウィンドウで表示されたものを指します。

下の「ポップアップ表示」をクリックしてみてください。

ポップアップ表示

☓

ポップアップウィンドウ

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
✗ボタンで戻れます。

クリックして出てきたものがポップアップウィンドウになります。

今回はこのポップアップをJavaScriptを使わずに、HTMLとCSSのみでコードを組んでいます。

コード

HTML

<!DOCTYPE html>
<html lang="ja">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>ポップアップ</title>
</head>
<body>
<label class="open" for="popup">ポップアップ表示</label>
<input type="checkbox" id="popup">
<div class="gray">
<div class="window">
<label class="close" for="popup">☓</label>
<h4 class="title">ポップアップウィンドウ</h4>
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。<br>
✗ボタンで戻れます。</p>
</div>
</div>
</body>
</html>

一つのcheckboxを付け外しするために、labelを2つにしています。

CSS

@charset "utf-8";
.open { display: inline-block;	cursor:pointer; color: #fff; background-color:#E83015 ; padding: 10px 30px; margin-top: 30px; border-radius: 10px;
}
#popup {	display: none;
}
.gray {	display: none;
}
#popup:checked + .gray {	display: block;	position: fixed;	width: 100%;	height: 100vh;	top: 0;	left: 0;	z-index: 9999;	background: rgba(0, 0, 0, 0.6);
}
.window {	position: fixed;	top: 50%;	left: 50%;	width: 90vw;	max-width: 360px; padding: 30px;	height: 300px;	background-color: #fff;	border-radius: 4px;	align-items: center;	transform: translate(-50%, -50%);
}
.title{ color: #E83015; font-size: 20px; margin-bottom: 30px; padding-bottom: 20px; border-bottom: #E83015 2px solid;
}
.close {	position: absolute; color: #fff; background-color:#E83015; padding: 5px 13px; border-radius: 10px;	top: 20px;	right: 20px;	cursor:pointer;
}