'this' 키워드를 사용한 자바스크립트 모달 창 구현 방법

17 Sep 2023

javascript

자바스크립트에서 모달 창을 구현할 때 ‘this’ 키워드를 활용할 수 있습니다. 모달 창은 사용자와 상호작용하기 위해 사용되며, 일반적으로 다이얼로그 또는 팝업 창으로 표현됩니다. ‘this’ 키워드는 현재 실행 중인 함수를 호출하는 객체를 참조하는 데 사용됩니다.

아래는 ‘this’ 키워드를 사용하여 자바스크립트 모달 창을 구현하는 간단한 예제 코드입니다.

// HTML 요소와 이벤트 리스너 연결
const openModalButton = document.querySelector('.open-modal-button');
openModalButton.addEventListener('click', openModal);

// 모달 창 오픈 함수
function openModal() {
  const modal = document.querySelector('.modal');
  modal.classList.add('active');
  this.classList.add('active'); // 'this' 키워드를 사용하여 클릭한 버튼에 클래스 추가
  // 모달 창 내용을 동적으로 업데이트하는 코드 추가
}

// HTML 요소와 이벤트 리스너 연결
const closeModalButton = document.querySelector('.close-modal-button');
closeModalButton.addEventListener('click', closeModal);

// 모달 창 클로즈 함수
function closeModal() {
  const modal = document.querySelector('.modal');
  modal.classList.remove('active');
  this.parentElement.classList.remove('active'); // 'this' 키워드를 사용하여 부모 요소에 클래스 제거
}

위의 예제 코드는 ‘openModalButton’이라는 클래스를 가진 HTML 요소와 ‘closeModalButton’이라는 클래스를 가진 HTML 요소를 클릭하면 모달 창을 열고 닫습니다. ‘openModal’ 함수는 ‘this’ 키워드를 사용하여 클릭한 버튼에 ‘active’ 클래스를 추가하며, ‘closeModal’ 함수는 ‘this’ 키워드를 사용하여 부모 요소에 있는 ‘active’ 클래스를 제거합니다.

위의 코드를 참고하여 ‘this’ 키워드를 활용하여 자바스크립트 모달 창을 구현해보세요. 이 방법을 사용하면 모달 창을 여러 개 만들고 각각의 동작을 제어하는 데 유용합니다.

#javascript #modaldialog