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

Question

[Danila232]

В общем у меня есть 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

[Ivan Ustûžanin]

по второму варианту:
решение проблемы, изначально событие вешалось всегда на первый крестик
строка 16:
let close = same.querySelector('.close__popup')

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

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

Comments

[Danila232]

О, спасибо большое! Я этого что-то не заметил

А можно ещё вопрос? Я хочу для попапа сделать анимацию. Для этого прописал изначальный transform() для .popup__content(а сам .popup__content вместе с родительским оверлеем изначально скрыты dispaly: none). Потом я создал класс .act с новым transform(). И когда оверлею по клику добавляется display: block, я задаю этот .act для .popup__content

Я наверное плохо объяснил, но вы если сможете посмотрите. Там может transform не работает из-за display: none? Может там через opacity скрывать/показывать попапы надо? Шоб анимация была

В CSS это строчки 31-44, в JS: 11-12
https://codepen.io/Vegan-AK/pen/zYeXQRK

[Ivan Ustûžanin]

Danila232, там много проблем, начиная с того что анимация не определена, т.к. не вижу свойства transition, два свойства transform с неверным синтаксисом во втором, так же как и в transform для .act

можно работать и с display: none, но тогда нужно вешать класс, обеспечивающий анимацию (и не забывать снимать его), через конструкция вида

requestAnimationFrame(() => { requestAnimationFrame(() => { content.classList.add('act'); }); });

чтобы стопроцентно гарантировать результат, ну или же не использовать display: none, а как-то по другому прятать оверлей, как вариант использовать visibility вместе с opacity и делать transition через них