Вопросы по Попап-окнам на чистом JS (сразу скажу, тут много)

Question

Вопросы по Попап-окнам на чистом JS (сразу скажу, тут много)

Союз Здравых Сил Профи (517), на голосовании 10 месяцев назад

В общем у меня есть 2 кнопки, и 2 попап-окна. Каждая кнопка открывает СВОЁ попап-окно, окна с разным содержанием. Сделал я это двумя способами(и по каждому вопросы, мдя):

1) Простой дурацкий способ, просто записывать в переменные отдельно каждую кнопку и попап, и вешать на кнопки обработчики. Понятное дело, это самый простой и дурацкий метод, но даже тут у меня вопрос: почему то когда я закрываю ВТОРОЙ попап, страница у меня прыгает вверх. Хотя в коде я прописал везде preventDefault()
Ссылка на 1й способ: https://codepen.io/Vegan-AK/pen/zYeXQRK

2) Тут я сделал через связку значений data-атрибутов у кнопок и попапов. Так логичней. Но всё равно почему-то именно после закрытия 2го попапа страница прыгает вверх. Не знаю, может я что-то про preventDefault() не знаю, мб он не срабатывает?
Ссылка на 2й способ: https://codepen.io/Vegan-AK/pen/poGBmvY

Важное замечание: прыганье вверх происходит только если закрывать по Крестику. Если просто нажимать вне попап-окна, то закроется как надо, без скачков вверх.

Answer 1

Потому что кнопка для закрытия окна у тебя не одна а две. Ты почему-то называешь "её" "общей". Обработчик применяется только к одной и вот почему:

 let closeP = document.querySelector('.close__popup');

Данный метод возвращает тебе первую попавшуюся кнопку с классом "close__popup". Для того чтобы найти все кнопки, следует использовать document.querySelectorAll(). И подключить один обработчик к нескольким кнопкам за 1 раз ты не можешь. Надо при помощи цикла перебрать коллекцию кнопок и каждой отдельно добавить обработчик.
Примерно так:

 const closePs = document.querySelectorAll('.close__popup');
// коллекция и 2 кнопок

for(const closeP of closePs){
  closeP.addEventListener('click', (e) => {
    e.preventDefault() 
    popup1.classList.remove('active');
    popup2.classList.remove('active');
    document.body.classList.remove('fixed-page');
  })
}

Зачем вообще использовать элемент ссылок "<a>"? Используй обычную кнопку "<button>" или простой блок "<div>". Избавишься от побочных эффектов. Ссылки должны использоваться по назначению.