Mostrar y ocultar las partes de la caja funciona bien, pero la parte document.addEventListener no funciona.
const btnopenModal = document.querySelectorAll('.show-modal'); const btnCloseModal = document.querySelector('.close'); const overlay = document.querySelector('.overlay'); const modal =document.querySelector('.modal'); const showModal = function() { modal.classList.remove('hidden'); overlay.classList.remove('hidden'); }; const hideModal = function() { modal.classList.add('hidden'); overlay.classList.add('hidden'); } for(let i = 0; i < btnopenModal.length; i++) btnopenModal[i].addEventListener('click', showModal); btnCloseModal.addEventListener('click', hideModal); overlay.addEventListener('click', hideModal); if(!overlay.classList.contains('hidden')) { document.addEventListener('keypress', function(e) { console.log(e.key); if(e.key === 'Escape') { hideModal(); } }) };¿Alguna otra forma de que esto funcione?
Mover si condición en devolución de llamada. Siempre desea agregar un oyente de keypress de tecla, simplemente no ejecute hideModal() si !overlay.classList.contains('hidden')
const btnopenModal = document.querySelectorAll('.show-modal'); const btnCloseModal = document.querySelector('.close'); const overlay = document.querySelector('.overlay'); const modal =document.querySelector('.modal'); const showModal = function() { modal.classList.remove('hidden'); overlay.classList.remove('hidden'); }; const hideModal = function() { modal.classList.add('hidden'); overlay.classList.add('hidden'); } for(let i = 0; i < btnopenModal.length; i++) btnopenModal[i].addEventListener('click', showModal); btnCloseModal.addEventListener('click', hideModal); overlay.addEventListener('click', hideModal); document.addEventListener('keypress', function(e) { console.log(e.key); if(e.key === 'Escape' && !overlay.classList.contains('hidden')) { hideModal(); } });Creo que su declaración if se evalúa cuando la página web se ejecuta por primera vez, y supongo que la declaración if se evalúa como falsa, ya que probablemente contiene la clase "oculta" al principio. No entiendo por qué lo pones en el controlador de claves dentro de una declaración if, si es por seguridad, deberías ponerlo dentro de tu función así:
document.addEventListener('keypress', function(e) { if(!overlay.classList.contains('hidden')) { console.log(e.key); if(e.key === 'Escape') { hideModal(); } }; })