Question

我一直在处理此弹出窗口，该弹出窗口在加载网页时显示。它显示，但是由于某种原因关闭按钮不起作用。我对前端没有一点经验，但是我一直在阅读一些教程，似乎如果您想关闭某件东西，可以使用“关闭”类。所以我尝试了一下，但是没有成功。

注意：很抱歉，如果以前不清楚，我认为有人误解了我的问题，并对其进行了编辑以反映出来，因此弹出窗口不是工具提示！我已将其从代码中删除，以使其更加清晰。弹出式广告是通过＃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>

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

1 个答案: