(JavaScript) Modal Handling

'use strict';

 

const modal = document.querySelector('.modal');

const overlay = document.querySelector('.overlay');

const btnCloseModal = document.querySelector('.close-modal');

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

 

const closeModal = function () {

  modal.classList.add('hidden');

  overlay.classList.add('hidden');

};

 

const openModal = function () {

  modal.classList.remove('hidden');

  overlay.classList.remove('hidden');

};

 

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

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

 

btnCloseModal.addEventListener('click', closeModal);

overlay.addEventListener('click', closeModal);

 

// e - Event Object

// Event Object = 현재  발생한 이벤트의 정보를 담고 있는 객체

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

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

    closeModal();

  }

});