尝试向网站页面添加弹出窗口，但 JavaScript 并未使弹出窗口在单击时消失

Question

我正在尝试向网站页面添加一个弹出框，提示用户单击按钮来访问网站的其余部分。这个想法是，当他们单击弹出框中的按钮时，整个弹出窗口将变得不可见并且无法与之交互。

我尝试通过添加 .click css 属性来实现此目的，该属性将使弹出窗口不透明度为 0，然后使用 javascript 添加 .click。真的不确定出了什么问题，所以感谢任何帮助

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>

Answer 1

1. popup.classList.add('.click');

   行不正确。应该是

   popup.classList.add('click');

2. 将 CSS 选择器更新为

   .popup.click

   以对齐类添加和选择器目标。

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>