HTML
<!DOCTYPE html>
<html>
<head>
<title>Modal</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>안녕하세요^^</h1>
<h2>내용입니다.</h2>
<button id="open">모달 열기</button>
<div class="modal-wrapper" style="display:none;">
<div class="modal">
<div class="modal-title">안녕</div>
<p>모달 내용은 어쩌고 저쩌고...</p>
<div class="close-wrapper">
<button id="close">닫기</button>
</div>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>CSS
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: #fff;
padding: 24px 16px;
border-radius: 4px;
width: 320px;
}
.modal-title {
font-size: 24px;
font=weight: bold;
}
.close-wrapper {
text-align: right;
}JS
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';
};결과
이 글은 패스트캠퍼스 '프론트엔드(React)올인원패키지Online'을 수강하며 정리한 노트입니다.
https://fastcampus.co.kr/search?keyword=%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C
개발짜🏃♀️