Не надо стесняться решение


#1

Немного не по курсу, но лучше тренироваться сразу на более современных вещах?

let popup=document.getElementsByClassName(“popup”);
//находим попап по имени класса

let show=document.getElementsByClassName(“button-show”);
//находим кнопку “Показать подробности”
show[0].addEventListener(“click”,function(evt){
evt.preventDefault();
popup[0].classList.add(“popup–open”);
})
//вешаем на эту кнопку обработчик событий добавляющий класс по клику+отменяем событие по умолчанию

let hide=popup[0].getElementsByClassName(“button-hide”);
hide[0].addEventListener(“click”,function(){
popup[0].classList.remove(“popup–open”);
})
//находим крестик и вешаем на него обработчик, удаляющий класс по клику

document.addEventListener(“keydown”,function(evt){
if(evt.keyCode===27){
popup[0].classList.remove(“popup–open”);
}
})
//вешаем на документ обработчик, отслеживающий нажатие “ESC”


#2

// Можно сделать вот так
// Если элементы одни в своем классе, лучше сделать так в комментариях.

// const pupup = document.querySelector(".popup"),
// showBtn = document.querySelector(".button-show"),
// hideBtn = document.querySelector(".button-hide")

const popup = document.querySelectorAll(".popup"),
showBtn = document.querySelectorAll(".button-show"),
hideBtn = document.querySelectorAll(".button-hide")

// Вешаем события
showBtn[0].addEventListener(“click”, show)
// showBtn.addEventListener(“click”, show)

hideBtn[0].addEventListener(“click”, hide)
// hideBtn.addEventListener(“click”, hide)

document.addEventListener(“keydown”, (ev) => {
// if (ev.keyCode === 27 && popup.classList.contains(“popup-open”) ) popup.classList.remove(“popup-open”)
if ( ev.keyCode === 27 && popup[0].classList.contains(“popup-open”) ) popup[0].classList.remove(“popup-open”)
})

function show(ev) {
ev.preventDefault()
// popup.classList.add(“popup-open”)
popup[0].classList.add(“popup-open”)
}

function hide() {
// popup.classList.remove(“popup-open”)
popup[0].classList.remove(“popup-open”)
}