Modal

간단하게 모달을 구현하는 방법을 배워보자.

여기에 보이는 모달 1 , 모달 2, 모달 3를 모두 선택해주고 싶을 때는 querySelectorAll을 이용한다. 그냥 querySelector만 쓰면 매치되는 여러 요소들 중 첫 번째 요소만 선택되기 때문이다.

const btnsOpenModal = document.querySelectorAll('.show-modal');

모달을 열고 닫는 기능을 자주 사용하기 때문에, 이를 함수로 만들어 반복해서 쓸 수 있게 한다.

const openModal = function () {
  modal.classList.remove('hidden');
  overlay.classList.remove('hidden');
};

const closeModal = function () {
  modal.classList.add('hidden');
  overlay.classList.add('hidden');
};

classList를 이용해 모달을 열 때는 hidden 클래스를 제거하고, 모달을 닫을 때는 hidden 클래스를 추가한다.

for (let i = 0; i < btnsOpenModal.length; i++)

btnsOpenModal[i].addEventListener('click', openModal);

btnClosemodal.addEventListener('click', closeModal);

overlay.addEventListener('click', closeModal);

여기서 반복문을 사용한 이유는 querySelectorAll이 매치되는 여러 요소를 노드리스트 형식으로 반환하기 때문이다. 따라서 하나씩 사용하려면 반복문을 통해 하나씩 꺼내야 한다. 각각의 모달에 addEventListener를 추가해 주었다.

CSS 파일에서 hidden 클래스는 기본적으로 display: none;으로 설정해 모달을 숨긴다.

.hidden {
  display: none;
}

이렇게 기본적으로 안 보이게 설정된 hidden 클래스를 추가하고 제거하면서 모달 창을 숨기고 나타내는 것이다.

다음으로 모달 창이 떴을 때 ESC 키로 닫히게 해보자.

document.addEventListener('keydown', function (e) {

  if (e.key === 'Escape') {
    if (!modal.classList.contains('hidden')) {
      closeModal();
    }
  }
  if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
    closeModal();
  }
});

여기서는 이벤트 객체를 사용해야 한다. addEventListener에서 'keydown'을 첫 번째 인자로, 두 번째 인자의 함수에 e를 넣어준다. 키보드를 누르면 e 객체에서 key라는 속성에 누른 키보드의 이름이 저장된다. ESC 키의 경우 Escape이다.

참고로 keydown, keypress, keyup 같은 이벤트는 키보드 이벤트라고 부른다. keydown은 키보드를 누르는 순간, keypress는 눌러지는 순간, keyup은 키보드에서 손을 떼는 순간에 발생한다.

마지막으로 function(e) 이벤트 객체에 대해 질문해서 받은 답변을 적어둔다.

Hi, and yes, that is the event object. It is created by the DOM (not really by JavaScript, I believe) when a user or other event happens, and is then passed to the event listener, which then again calls the function we programmed it to call. It is sent whether we want it or not, but if we do, then we accept that as a parameter to our function, and that gives is access to all its properties.

So we set up an event listener with (in this example) document.addEventListener, and then tell the event listener which event to listen for, and which function to call when the event happens. This "registers" that listener with the DOM.

The user then - again in this example - presses a key, the browser engine detects a keydown event which it informs the DOM about. The DOM then tells JavaScript to execute the function we assigned to that event, and passes the event object to it. JavaScript then puts that object into the first parameter of the function, if we define one.