Всплывающий HTML-код: содержимое не отображается при нажатии кнопки. ⇐ CSS

[Anonymous]

Содержимое всплывающего окна не отображается при нажатии.
Я приведу только сокращенную версию кода.
При нажатии кнопки содержимое должно отображаться.
HTML-код. Кнопка запустит код js, чтобы сделать CSS активным.
Css покажет активную версию всплывающего окна, которая делает его видимым.

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

function togglePopup() {
document.getElementById("popup_chicken").classList.toggle("active");
}

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

.chicken {
background: rgb(0, 0, 0, 0.5);
width: 100%;
height: auto;
text-align: center;
z-index: 2;
transform: translate(-50%, -50%) scale(0);
visibility: hidden;
&_content {
display: inline-block;
background-color: black;
border-radius: 30px;
box-shadow: -5px 5px 10px black;
padding: 20px;
width: 80%;
margin-top: 3%;
margin-bottom: 3%;
&_buttons {
margin: 15px 0;
&_close {
background-color: $b;
cursor: pointer;
border-radius: 50px;
border-style: hidden;
padding: 20px 30px;
margin: 0 25px;
}
.chicken.active .chicken {
transform: translate(-50%, -50%) scale(1);
transition: all 300ms ease-in-out;
visibility: visible;
}
}

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

click me!




content here
Close

Подробнее здесь: https://stackoverflow.com/questions/784 ... is-clicked