У меня проблемы с добавлением нескольких всплывающих всплесков на моей странице портфолио, мне интересно, может ли кто - ⇐ CSS

[Anonymous]

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

Код: Выделить всё

let popup = document.getElementById("popup");

function openPopup() {
popup.classList.add("open-popup");
}

function closePopup() {
popup.classList.remove("open-popup");
}

let popup2 = document.getElementById("popup2");

function openPopup() {
popup2.classList.add("open-popup2");
}
function closePopup() {
popup2.classList.remove("open-popup2");
}< /code>
.popup {
width: 60%;
background-color: #fff;
border-radius: 15px;
position: fixed;
top: 0%;
left: 50%;
transform: translate(-50%, -50%) scale(0.1);
text-align: center;
padding: 0 30px 60px;
color: #333;
visibility: hidden;
z-index: 9002;
box-shadow: 3px 3px 3px 3px #333;
border: solid 3px #333;
transition: transform 0.4s, top 0.4s;
}

.open-popup {
visibility: visible;
top: 50vh;
transform: translate(-50%, -50%) scale(1);
}
.popup2 {
width: 60%;
background-color: #fff;
border-radius: 15px;
position: fixed;
top: 0%;
left: 50%;
transform: translate(-50%, -50%) scale(0.1);
text-align: center;
padding: 0 30px 60px;
color: #333;
visibility: hidden;
z-index: 9002;
box-shadow: 3px 3px 3px 3px #333;
border: solid 3px #333;
transition: transform 0.4s, top 0.4s;
}

.open-popup2 {
visibility: visible;
top: 50vh;
transform:  translate(-50%, -50%) scale(1);
}< /code>



[img]item-1-2000x1333.jpg[/img]
            alt="RYA guide to risk assessment text" />


[h4]RYA part 1[/h4]
A technical problem

More details






RYA part 1 - A technical issue


In this project I was tasked with fixing a project
back


[img]RYA-UAT-2000X1333.jpg[/img]


[h4]RYA part 2[/h4]
An overhaul

More details





RYA part 2 - A new website


In this project I was tasked with fixing a project
back



[img]RYA-UAT-2000X1333.jpg[/img]


[h4]RYA part 2[/h4]
An overhaul
More details




RYA part 2 - A new website


In this project I was tasked with fixing a project
back

Я попытался переделать его из учебника, а не копировать и вставать, но я не могу понять, почему это противоречиво.

Подробнее здесь: https://stackoverflow.com/questions/795 ... i-wonder-i