* 노마드코더 영상을 참고하여 만들었습니다.
<!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>모달창 만들기</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button id="btn">열기</button>
<div class="modal hidden">
<div class="modal_overlay"></div>
<div class="modal_content">
<h1>I'm a modal</h1>
<button>❌</button>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
const openModal = document.querySelector("#btn");
const modal = document.querySelector(".modal");
const overLay = modal.querySelector(".modal_overlay");
const close = modal.querySelector("button");
function openHandle() {
modal.classList.remove("hidden");
}
function closeHandle() {
modal.classList.add("hidden");
}
// const openHandle = () => {
// modal.classList.remove("hidden");
// }
// const closeHandle = () => {
// modal.classList.add("hidden");
// }
openModal.addEventListener("click", openHandle);
close.addEventListener("click", closeHandle);
overLay.addEventListener("click", closeHandle);*위 주석처리 부분은 노마드코더 영상에서는 화살표 함수로 작성했지만, 화살표 함수를 잘 모르기 때문에 기존 함수로 수정했습니다.
열기를 누르면 모달창이 나오며, X버튼이나 모달창 바깥 부분을 누르면 사라지는게 제대로 작동하고 있습니다.
댓글