ポップアップウィンドウを自作したい。

CSS, HTML, Javascript

最近Javascriptを学習し始めました。

成果物としてポップアップウィンドウを作りたいと思います。

HTML

<div id="popup">Click</div>
<div id="popWin"></div>

CSS

#popup {
  text-align: center;
  font-weight: bold;
  display: block;
  width: 100px;
  padding: 10px;
  border: solid;
  border-radius: 8px;
  margin: 0 auto;
  cursor: pointer;
}
#popWin {
  position: absolute;
	top: 0;
	width: 100vw;
	height: 100vh;
	z-index: 0;
	display: none;
	justify-content: center;
	align-items: center;
	background-color: rgba(0,0,0,.5);
}
.pop-win {
	width: 50vw;
	height: 50vh;
	background-color: #fff;
}
#close {
	color: #fff;
	position: absolute;
	top: 20px;
	right: 20px;
	cursor: pointer;
}

Javascript

const popup = document.querySelector('#popup');
const popWin = document.querySelector('#popWin');
popup.addEventListener('click', e => {
	popWin.style.display = 'flex';
	popWin.innerHTML = `
		<div class="pop-win">
			ポップアップウィンドウ
			<div id="close">閉じる</div>
		</div>
	`;
	const closeWin = document.querySelector('#close');
	closeWin.addEventListener('click', e => {
		popWin.style.display = 'none';
	});
});

サンプル

See the Pen pop-up_window by reirei (@sugoi-reirei) on CodePen.

いつ使うか分かりませんが作ってみたかったので作りました、以上。