[javascript] 모달 클릭 이벤트 처리

 

버튼이 3개 있을 때,

 

버튼 세개에 전부 클릭 이벤트를 주고자 한다면 반복문을 이용해서 처리해 줄 수 있다.

 

app.js

const showModal = document.querySelectorAll('.show-modal');
const modal = document.querySelector('.modal');
const closeBtn = document.querySelector('.close-modal');
const overlay = document.querySelector('.overlay');

for (let i = 0; i < 3; i++) {
  showModal[i].addEventListener('click', function () {
    modal.classList.remove('hidden');
    overlay.classList.remove('hidden');
  });
}

closeBtn.addEventListener('click', function () {
  modal.classList.add('hidden');
  overlay.classList.add('hidden');
});

overlay.addEventListener('click', function () {
  modal.classList.add('hidden');
  overlay.classList.add('hidden');
});

해당 요소에 block, none 으로 처리하는 것 보다

modal 자체에 클래스를 주어 

클래스를 add 하거나 remove 하는 형식으로 처리해주는 것이 깔끔하다.

style.css>

.hidden {
  display: none;
}

index.html>

<div class="modal hidden"></div>

 

 

 

app. js 리펙토링

showedModal 과 hiddenModal 으로 기능을 나눠 호출 형식으로 리팩토링 가능하다.

'use strict';

const showModal = document.querySelectorAll('.show-modal');
const modal = document.querySelector('.modal');
const closeBtn = document.querySelector('.close-modal');
const overlay = document.querySelector('.overlay');

const showedModal = function () {
  modal.classList.remove('hidden');
  overlay.classList.remove('hidden');
};
const hiddenModal = function () {
  modal.classList.add('hidden');
  overlay.classList.add('hidden');
};
for (let i = 0; i < 3; i++) {
  showModal[i].addEventListener('click', showedModal);
}

closeBtn.addEventListener('click', hiddenModal);

overlay.addEventListener('click', hiddenModal);