Пытаюсь добавить всплывающее окно на страницу веб-сайта, но 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;
}

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

// Reference the <dialog> and the 2 <button>s
const popup = document.querySelector(".popup");
const exit = document.querySelector(".exit");
const close = document.querySelector(".close");

// Start with <dialog> open.
popup.showModal();

/*
  Register <button class = "exit"> to listen for the "click" event.
  When invoked, the browser will jump back to the previous page.
  This feature will not work from this Snippet.
*/
exit.addEventListener("click", function(e) {
  history.back();
});

/*
  Register <button class = "close"> to listen for the "click" event.
  When invoked, the <dialog> will close.
*/
close.addEventListener("click", function(e) {
  popup.close();
});

:root {
  font: 3vmin/1 "Segoe UI";
}

main {
  width: 100%;
}

/*
  The following styles animate the <dialog>
  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#animating_dialogs
*/
/* BEGIN */
.popup {
  border: 0;
  background: rgb(0 0 0 / 0%);
  opacity: 0;
  transform: scaleY(0);
  transition: 0.7s allow-discrete;
}

.popup[open] {
  opacity: 1;
  transform: scaleY(1);
}

@starting-style {
  .popup[open] {
    opacity: 0;
    transform: scaleY(0);
  }
}

.popup::backdrop {
  background: rgb(0 0 0 / 0%);
  transition: 0.7s allow-discrete;
}

.popup[open]::backdrop {
  background: rgb(0 0 0 / 50%);
}

@starting-style {
  .popup[open]::backdrop {
  background: rgb(0 0 0 / 50%);
  }
}
/* END */

.warning {
  margin-top: 10vh;
  padding: 0.25rem;
  border-radius: 8px;
  background: blue;
}

header {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding: 0.25rem 1rem 0;
}

h4 {
  margin: 0;
  font-weight: 500;
  font-size: 4rem;
  color: white
}

.content {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  background: white;
}

.message {
  padding: 1rem 1rem 0;
  font-size: 2rem;
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 1.5rem;
  border-radius: 8px;
  background: white;
}

button {
  display: inline-block;
  width: 11ch;
  padding: 0.2rem 0.5rem 0.4rem;
  border-color: transparent;
  outline: none;
  font: inherit;
  font-size: 2rem;
  color: white;
  background: blue;
}

button:hover {
  opacity: 0.7;
  cursor: pointer;
}

button:active {
  opacity: 1;
}

.exit {
  border-color: blue;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 8px;
  border-top-left-radius: 8px;
  border-right: 1.5px inset #bbb;
  color: blue;
  background: white;
}

.close {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 8px;
  border-top-right-radius: 8px;
  border-left: 1.5px inset #bbb;
}

<dialog class = "popup">
  <section class = "warning">
    <header>
      <h4>Warning</h4>
    </header>
    <section class = "content">
      <p class = "message">This website contains mature content not suited for minors.</p>
      <footer>
        <button class = "exit">Under 18</button>
        <button class = "close">Over 17👍</button>
      </footer>
    </section>
  </section>
</dialog>

<main>
  <p>Let’s burn that lab to the ground. Friends don't lie. Nancy, seriously, you're gonna be so cool now, it's ridiculous. You're an idiot, Steve Harrington. You're beautiful, Nancy Wheeler.</p>
  <p> Friends don't lie. Nancy, seriously, you're gonna be so cool now, it's ridiculous. You're an idiot, Steve Harrington. You're beautiful, Nancy Wheeler. We never would've upset you if we knew you had superpowers.</p>
  <p> Nancy, seriously, you're gonna be so cool now, it's ridiculous. You're an idiot, Steve Harrington. You're beautiful, Nancy Wheeler. We never would've upset you if we knew you had superpowers. We never would've upset you if we knew you had superpowers.</p>
  <p> You're an idiot, Steve Harrington. You're beautiful, Nancy Wheeler. We never would've upset you if we knew you had superpowers. We never would've upset you if we knew you had superpowers. You’re going to be home by 8, listening to the Talking Heads
    and reading Vonnegut or something.</p>
  <p> You're beautiful, Nancy Wheeler. We never would've upset you if we knew you had superpowers. We never would've upset you if we knew you had superpowers. You’re going to be home by 8, listening to the Talking Heads and reading Vonnegut or something.
    That sounds like a nice night.</p>
  <p> We never would've upset you if we knew you had superpowers. We never would've upset you if we knew you had superpowers. You’re going to be home by 8, listening to the Talking Heads and reading Vonnegut or something. That sounds like a nice night. Mouth-breather.</p>
  <p> We never would've upset you if we knew you had superpowers. You’re going to be home by 8, listening to the Talking Heads and reading Vonnegut or something. That sounds like a nice night. Mouth-breather. So, Jonathan, how was the pull-out? Do you know
    anything about sensory deprivation tanks? Specifically how to build one?You are such a nerd.</p>
  <p>You’re going to be home by 8, listening to the Talking Heads and reading Vonnegut or something. That sounds like a nice night. Mouth-breather. So, Jonathan, how was the pull-out? Do you know anything about sensory deprivation tanks? Specifically how
    to build one? You are such a nerd. No wonder you only hang out with boys.</p>
  <p> That sounds like a nice night. Mouth-breather. So, Jonathan, how was the pull-out? Do you know anything about sensory deprivation tanks? Specifically how to build one?</p>
  <p>That sounds like a nice night. I need my paddles! Yeah, I want a date with Bo Derek. We all want things. It’s about the shadow monster, isn’t it? You’re going to take out the demigorgon with a slingshot? You are such a nerd. No wonder you only hang
    out with boys.</p>
  <p> I need my paddles! Yeah, I want a date with Bo Derek. We all want things. It’s about the shadow monster, isn’t it? You’re going to take out the demigorgon with a slingshot? You are such a nerd. No wonder you only hang out with boys. YOU BETTER RUN!</p>
  <p>She's our friend, and she's crazy! You are such a nerd. We all want things. It’s about the shadow monster, isn’t it? You’re going to take out the demigorgon with a slingshot? You are such a nerd. </p>
  <p>Bitchin' Let’s burn that lab to the ground. No. . . no El, you're not the monster. You saved me. Do you understand? You saved me. Mouth-breather. You’re right.</p>
  <p>Mouth-breather. You’re right. You are a freak…. Who would you rather be friends with: Bowie or Kenny Rogers? Why’s he gotta kick the door? Nobody normal ever accomplished anything meaningful in this world.</p>
  <p> You’re right. You are a freak…. Who would you rather be friends with: Bowie or Kenny Rogers?</p>
</main>