弹出窗口关闭按钮不关闭弹出窗口

Question

我一直在研究这个在网页加载时显示的弹出窗口。它出现了，但由于某种原因关闭按钮不起作用。我对前端有点缺乏经验，但我一直在阅读一些教程，看来如果你想做一些接近的事情，你可以使用 class "close." 所以我试过了，但没有成功。

注意：抱歉，如果之前不清楚，我认为有人误解了我的问题并对其进行了编辑以反映这一点，但弹出窗口不是工具提示！我已将其从代码中删除以使其更清楚。弹出窗口是通过样式中的#ac-wrapper 和#popup 以及我的html 文件

中的脚本中的函数PopUp() 完成的

这是我的。

function PopUp() {
  document.getElementById('ac-wrapper').style.display = "block";
}

#ac-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, .6);
  z-index: 1001;
}

#popup {
  display: "none";
  width: 555px;
  height: 375px;
  background: #FFFFFF;
  border: 5px solid #000;
  border-radius: 25px;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  box-shadow: #64686e 0px 0px 3px 3px;
  -moz-box-shadow: #64686e 0px 0px 3px 3px;
  -webkit-box-shadow: #64686e 0px 0px 3px 3px;
  position: relative;
  top: 150px;
  left: 375px;
}

<div id="ac-wrapper">
  <div id="popup">
    <center>
      <h3> welcome to my website</h3>
      <a class="close" href="#">&times;</a>
    </center>
  </div>
</div>

Answer 1

很简单：

function PopUp() {
  document.getElementById('ac-wrapper').style.display = "block";
}


document.querySelector('.close').addEventListener("click",()=> document.getElementById('ac-wrapper').style.display='none');

#ac-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, .6);
  z-index: 1001;
}

#popup {
  display: "none";
  width: 555px;
  height: 375px;
  background: #FFFFFF;
  border: 5px solid #000;
  border-radius: 25px;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  box-shadow: #64686e 0px 0px 3px 3px;
  -moz-box-shadow: #64686e 0px 0px 3px 3px;
  -webkit-box-shadow: #64686e 0px 0px 3px 3px;
  position: relative;
  top: 150px;
  left: 375px;
}

<div id="ac-wrapper">
  <div id="popup">
    <center>
      <h3> welcome to my website</h3>
      <a class="close" href="#">&times;</a>
    </center>
  </div>
</div>

弹出窗口关闭按钮不关闭弹出窗口

Popup close button not closing the popup

html

javascript

css

frontend

popup