[Javascript] 자바스크립트로 모달 만들기

미니프로젝트를 진행하던 중 모달 구현을 기억하기위해 이 글을 남긴다.

<button id="modal-btn" type="button">Modal Open</button>
<div class="modal">
		<div class="modal-body">
			<button class="close-modal-btn">X</button>
              <h1>Modal</h1>
		</div>
</div>

모달 구현을 위한 간단한 HTML을 작성해준다.
모달안에는 모달을 끌 수 있는 버튼과 본문 내용이 들어있다.
modal 클래스의 역할은 뒷배경 (검은화면)이며, modal-body 가 진짜 모달 역할이다.

.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	background-color: rgba(0, 0, 0, 0.4);
}

.modal.show {
	display: block;
}

.modal-body {
	position: fixed;
	left: 50%;
	top: 50%;
	width: 30rem;
	height: 20rem;
	background-color: rgb(255, 255, 255);
	border-radius: 1.2rem;
	text-align: center;
	transform: translateX(-50%) translateY(-50%);
}

.close-modal-btn {
	margin: 1rem auto;
	width: 10rem;
	border: none;
	background-color: black;
	color: white;
	border-radius: 0.5rem;
}

.show 클래스가 존재하는 이유는 모달 버튼을 toggle로 껐다 켤 수 있게 하기 위함이다.

모달을 화면의 가운데로 정렬하기위해 transform 을 사용하였다.

const modalOpenBtn = document.querySelector("#modal-btn").addEventListener("click", (e) => {
  const modal = document.querySelector('.modal');
		modal.classList.toggle('show');
});
      
const closeModalBtn = document.querySelector('.close-modal-btn');
closeModalBtn.addEventListener('click', (e) => {
	const modal = document.querySelector('.modal');

	modal.classList.toggle('show');
});

const modalBackground = document.querySelector('.modal');
modalBackground.addEventListener('click', (e) => {
	const modal = document.querySelector('.modal');

	if (e.target === modal) {
		modal.classList.toggle('show');
	}
});

우선 버튼에 이벤트리스너를 추가한다. 클릭시 .show 클래스가 .modal 클래스에 토글로 적용될 수 있도록 classList.toggle을 적용한다

X버튼과 배경을 클릭할 시 모달창이 꺼질 수 있도록 똑같이 토글을 적용해준다.

if (e.target === modal) {
		modal.classList.toggle('show');
	}

위 코드를 사용하는 이유는 이벤트가 정확히 어디서 발생되었는지 파악해야하기 때문이다.
이벤트 버블링때문에 .modal-body에서 발생한 이벤트가 상위 요소인 .modal로 이동하기때문에 .modal-body를 눌렀을 시 모달이 꺼지는 현상이 존재한다.
이것을 방지하기위해 이벤트가 정확히 .modal에서 발생했을때만 .show 클래스를 토글하였다.