@Danila232

Вопросы по Попап-окнам на чистом JS ??

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

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

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

Важное замечание: прыганье вверх происходит только если закрывать по Крестику. Если просто нажимать вне попап-окна, то закроется как надо, без скачков вверх.
  • Вопрос задан
  • 85 просмотров
Решения вопроса 1
IvanU7n
@IvanU7n
по второму варианту:
решение проблемы, изначально событие вешалось всегда на первый крестик
строка 16:
let close = same.querySelector('.close__popup')

коли у вас есть переменная с попапом, то её вполне можно использовать для закрытия при клике по оверлею
строки 25-27:
if (e.target == same){

в первом варианте вы вообще почему-то решили, что крестик у них общий, а это не так, причина прыжков именно в этом, т.к. клик по второму крестику ничем не перехватывался
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы