Copy of 수강신청 모달 실습

HTML

<!DOCTYPE html>
<html lang="en">
<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">
  <title>Document</title>
</head>
<body>
	<button id = "open" >수강 신청</button>
	<div class = "modal-wrapper">
			<div class = "modal">
					<div class = "modal-title">경고</div>
					<p>수강신청 기간이 아닙니다</p>
					<div class = "close-wrapper">
							<button id = "close">닫기</button>
					</div>
			</div>
	</div>
	
</body>
</html>

body {
  font-family: sans-serif;
}

.modal-wrapper {
  position: fixed;
  top : 0;
  left : 0;
  width : 100%;
  height : 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal{
  background: white;
  padding: 24px 16px;
  border-radius : 4px;
  width: 320px;
}

.modal-title {
  font-size: 24px;
  font-weight: bold;
}

.close-wrapper{
  text-align: right;
}

const open = document.getElementById('open');
const close = document.getElementById('close');

const modal = document.querySelector('.modal-wrapper');

open.onclick = () => {
    modal.style.display = 'flex';
}

close.onclick = () => {
    modal.style.display = 'none';
}