Trying to add a popup to a website page but the javascript isn't making the popup disappear on click

Edit: I adjusted the css and js as advised and was still having issues until I moved the script to the bottom of my html document right before my closing body tag. I guess it wasn't fully loading before attempting to run the script. oops! Thanks so much everyone for helping me out ^^

I am trying to add a popup box to a website page that prompts users to click a button to access the rest of the site. The idea is that when they click the button in the popup box the entire popup becomes invisible and unable to interact with.

I tried to accomplish this by adding a .click css property that would make the popup opacity 0 and then adding the .click with the javascript. Genuinely not sure whats wrong so any help appreciated

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;
}

<div class="popup">
  <div class="warning">
    <div class="heading">Warning</div>
    <div class="message-box">
      <div class="message">This website contains mature content not suited for minors</div>
      <div class="button-box">
        <button class="close_button" type="button">I am 18+</button>
      </div>
    </div>
  </div>
</div>

Solution

The line popup.classList.add('.click'); is incorrect. It should be popup.classList.add('click');
Update the CSS selector to .popup.click to align the class addition and selector targeting.

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;
}

<div class="popup">
  <div class="warning">
    <div class="heading">Warning</div>
    <div class="message-box">
      <div class="message">This website contains mature content not suited for minors</div>
      <div class="button-box">
        <button class="close_button" type="button">I am 18+</button>
      </div>
    </div>
  </div>
</div>