He estado buscando en la web, pero no pude encontrar la respuesta a la pregunta, que parece tener una solución trivial.

Tengo tres ventanas emergentes en mi página, que el usuario puede abrir y la funcionalidad para abrirlas y cerrarlas parece habitual:

 const popupPicture = document.querySelector(".popup_pic"); const popupProfile = document.querySelector(".popup_profile"); const popupImage = document.querySelector(".popup_image"); function openPopup(popup) { popup.classList.add("popup_opened"); } function closePopup(popup) { popup.classList.remove("popup_opened"); }

y paso una de las variables emergentes a closePopup oa openPopup como variable. Por ejemplo

 closePopupButton.addEventListener("click", () => closePopup(popupProfile)); closePopupImageButton.addEventListener("click", () => closePopup(popupImage)); closePopupPictureButton.addEventListener("click", () => closePopup(popupPicture));

Lo mismo con la apertura de ventanas emergentes. Ahora necesito cerrar la funcionalidad con el botón Escape. Entiendo que es fácil de lograr si solo hay una ventana emergente con el siguiente código:

 document.addEventListener("keydown", function (evt) { if (evt.key === "Escape") { // and close popup here } });

Pero hay tres ventanas emergentes en mi caso y no sé cuáles debo cerrar. Por supuesto que puedo hacerlo de esta manera fea:

 document.addEventListener("keydown", function (evt) { if (evt.key === "Escape") { closePopup(popupProfile); closePopup(popupImage); closePopup(popupPicture); } });

Y resuelve mi caso, pero me pregunto si hay una solución más elegante, que no requiera llamar a dos funciones que no deberían llamarse.

Espero haber dejado claro mi problema.

¡Muchas gracias por adelantado!