Сделать более одного всплывающего окна ⇐ CSS

[Anonymous]

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

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

Terapia
psicológica
...
Ver más


Terapia psicológica
Durante la terapia psicológica, podrás ir trabajando en ti, estableciendo metas con mi ayuda para que puedas sentirte cómodo contigo mismo.  La terapia está estructurada desde el enfoque Cognitivo Conductual, es decir, se trabajan tanto los pensamientos y cómo estos influyen en nuestras emociones y comportamientos.
• Dirigido a: Adolescentes, adultos y adultos mayores.
• Duración: 50 minutos.
• Plataforma: Google Meet
X




Evaluación
psicológica
...
Ver más


Evaluación psicológica
BLablabalabalabl
X




Descarte de
TDAH y Autismo
...
Ver más


Descarte de TDAH y Autismo psicológica
BLablabalabalabl
X

CSS:

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

.products {
background-color: #DFF6DF;
height: 100vh;
position: relative;

&-container {
display: flex;
position: absolute;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}

&-bar {
display: flex;
background-color: #8FCF8F;
width: 100%;
height: 50%;
flex-direction: row;
justify-content: space-evenly;
gap: 0.5em;
padding-right: 3em;

&-img {
display: flex;
width: 30%;
align-items: center;
justify-content: flex-end;

img {
height: 120%;
}
}

&-container {
display: flex;
align-items: center;
justify-content: space-around;
width: 60%;
margin: 1em 4em;
}

&-item {
display: flex;
flex-direction: column;
text-align: center;
width: 30%;
justify-content: space-around;
align-items: center;
height: 60%;

&-title {
font-weight: 700;
color: rgba(16, 51, 16, 1);
}

&-button {
background-color: rgba(16, 51, 16, 1);
width: 7rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0.8em;
color: white;
font-size: 0.8em;
border-radius: 1em;
cursor: pointer;
}
}

}
}

.popup-container {
display: flex;
background: rgba(0, 0, 0, 0.3);
align-items: center;
justify-content: center;
position: fixed;
pointer-events: none;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
opacity: 0;
}

.show {
pointer-events: auto;
opacity: 1;
animation: fadeIn 1s;
}

.popup {
background-color: white;
width: 600px;
max-width: 100%;
padding: 2em;
border-radius: 1em;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
text-align: center;
position: relative;

&-close {
border: none;
background: transparent;
color: black;
position: absolute;
top: 1em;
right: 1.5em;
cursor: pointer;
}

&-info {
margin: 1em 0;
}

&-list {
text-align: left;
line-height: 2em;
}
}

.popup-title {
font-weight: 700;
color: rgba(16, 51, 16, 1);
margin-bottom: 1em;
}

@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}

Javascript:

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

const open = document.getElementById('popup-open');
const popup_container = document.getElementById('popup-container');
const close = document.getElementById('popup-close');

open.addEventListener('click', () => {
popup_container.classList.add('show');
});

close.addEventListener('click', () => {
popup_container.classList.remove('show');
});

Я попробовал скопировать и вставить один и тот же HTML-код, чтобы убедиться, что элементы абсолютно одинаковы, но, похоже, это не сработало. Нужно ли мне создавать другое событие в JavaScript? Дайте мне знать, если я упущу какие-либо подробности, поскольку это мои первые вопросы здесь. Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/785 ... one-pop-up