(JavaScript) Modal Handling

(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();

}

});

from http://haramang.tistory.com/96 by ccl(A) rewrite - 2021-10-30 15:27:47