Modal?
현재 페이지 상단에 표시되는 대화 상자/문서 창

Modal

클릭 버튼 이벤트를 통해서 classList에 클래스를 넣거나 제거하면 된다.
조금 세련된 경고창이라고 생각하면 유용하게 사용할 것 같다.

const modalBtn = document.querySelector('.modal-btn');
const modalOverlay = document.querySelector('.modal-overlay');
const closeBtn = document.querySelector('.close-btn');

modalBtn.addEventListener('click', function() {
  modalOverlay.classList.add('open-modal');
})

closeBtn.addEventListener('click', function() {
  modalOverlay.classList.remove('open-modal');
})

배운 점

사이드 바와 비슷해서 이해하기 쉬웠다. 다만 모달이라는 것은 처음 들어보고 사용해보니 센스 있게 만들면 유용할 것 같다.