Как заставить всплывающее окно корректно работать в фотогалерее ⇐ CSS

[Anonymous]

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

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

function togglePopup() {
document.getElementById("popup-1").classList.toggle("active");
}

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

.popup.active .overlay {
display: block;
}

.popup.active .content {
transition: all 300ms ease-in-out;
transform: translate(-50%, -50%) scale(1);
}

.BodyAlignment::before{
content: "Body Alignment Overlay & Comparison";
text-align: center;
}

.pic::before{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 25px;
font-weight: bold;
width: 100%;
margin-top: -100px;
opacity: 0;
transition: .3s;
transition-delay: .2s;
}
.pic:after{
content: "";
position: absolute;
width: 100%;
bottom: 0;
left: 0;
border-radius: 10px;
height: 0;
background-color: rgb(0, 0, 0,.4);
transition: .3s;
}
.pic:hover::after{
height: 100%;
}
.pic:hover::before{
margin-top: 0;
opacity: 1;
}

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

[img]C:\Users\Marks\Desktop\portfolio





×
Title
weeeeeeeewooooooooooo

Подробнее здесь: https://stackoverflow.com/questions/793 ... to-gallery