Пытаюсь добавить всплывающее окно на страницу веб-сайта, но JavaScript не заставляет всплывающее окно исчезать при нажат ⇐ CSS

[Anonymous]

Я пытаюсь добавить на страницу веб-сайта всплывающее окно, предлагающее пользователям нажать кнопку для доступа к остальной части сайта. Идея состоит в том, что когда они нажимают кнопку во всплывающем окне, все всплывающее окно становится невидимым и с ним невозможно взаимодействовать.
Я попытался добиться этого, добавив CSS-свойство .click, которое делало бы непрозрачность всплывающего окна 0, а затем добавление .click с помощью javascript. Честно не понимаю, что не так, поэтому буду благодарен за любую помощь.

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

let popup = document.querySelector('.popup');
let close_button = document.querySelector('.close_button');
close_button.onclick = function() {
popup.classList.add('.click');
}

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

.popup {
display: flex;
align-items: center;
justify-content: center;
transition: 0.2s;
}

.popup .click {
opacity: 0;
pointer-events: none;
}

.warning {
display: flex;
flex-direction: column;
background-color: blue;
padding: 1vh;
margin-top: 5vh;
}

.heading {
font-size: 60px;
color: azure;
padding-bottom: 1vh;
}

.message-box {
background-color: azure;
padding: 1vh;
}

.message {
font-size: 24px;
padding-bottom: 1vh;
}

.button-box {
display: flex;
align-items: center;
justify-content: center;
}

.close_button {
font-size: 24px;
background-color: blue;
color: azure;
border: 0px;
padding: 1vh;
border-radius: 5px;
transition: opacity 0.3s;
}

.close_button:hover {
opacity: 0.7;
}

.close_button:active {
opacity: 1;
}

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

Warning

This website contains mature content not suited for minors

I am 18+

Подробнее здесь: https://stackoverflow.com/questions/787 ... g-the-popu