Javascriptでポップアップウィンドウを自作

##完成品

###HTML

html

<div id="popup">Click</div>
<div id="popWin">
    <div class="pop-win">
        ポップアップウィンドウ
        <div id="close">閉じる</div>
    </div>
</div>

###CSS

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: fixed;
	top: 0;
	left: 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

javascript

const popup = document.getElementById('popup');
const close = document.getElementById('close');
const popWin = document.getElementById('popWin');
popup.addEventListener('click', () => {
    popWin.style.display = 'flex';
});
close.addEventListener('click', () => {
    popWin.style.display = 'none';
});

###サンプル

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