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

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

我不确定发生了什么,但我真的很感谢一些指导。

这是我的东西。

我的html / javascript

<html>
<head>
  <link rel="stylesheet" type="text/css" href="tooltipster.bundle.min.css"/>
  <link rel="stylesheet" type="text/css" href="tooltipster-sideTip-punk.min.css"/>
  <link rel="stylesheet" type="text/css" href="style.css"/>

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
  <script type="text/javascript" src="tooltipster.bundle.min.js"></script>
  <script type="text/javascript" src="src.js"></script>

  <script>
    function PopUp(){
        document.getElementById('ac-wrapper').style.display="block"; 
}
  $(document).ready(function() {
      $('.tooltip').tooltipster({
      theme: 'tooltipster-punk',
      maxWidth: 270,
      contentAsHTML: true, 
      trigger: 'custom',
       triggerOpen: { 
           click: true,
           tap: true,
           mouseenter: true
           },
          triggerClose: { 
           click: true,
           scroll: false,
           tap: true,
           mouseleave: true
           }
  }); 
});

</script>

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

我的样式文件

.tooltipster-sidetip.tooltipster-punk
.tooltipster-box{
  border-bottom:5px solid #50E3C2;  
  background:#fff  
  }

.tooltipster-sidetip.tooltipster-punk.tooltipster-top
.tooltipster-arrow-border{border-top-color:#50E3C2}

.tooltipster-sidetip.tooltipster-punk.tooltipster-bottom
.tooltipster-arrow-border{border-bottom-color:#fff}

.tooltipster-sidetip.tooltipster-punk.tooltipster-left
.tooltipster-arrow-border{border-left-color:#fff}

.tooltipster-sidetip.tooltipster-punk.tooltipster-right
.tooltipster-arrow-border{border-right-color:#fff}

.tooltipster-sidetip.tooltipster-punk
.tooltipster-content{color:#000;padding:8px 16px; font-family:'Arial';font-size: 18;}

#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;
}
评论