如何在我的网站中关闭Css弹出窗口？

Question

我为其中一个网站的首页创建了纯css弹出窗口，作为号召性用语...

它在codepen中完美运行：http://codepen.io/JaimeLopes/pen/pjmajJ

但是在我网站的主页上：http://shewantsagentleman.me关闭按钮不起作用。任何人都可以解释原因吗？

代码也在这里：

＆＃13;

＆＃13;

#container-popup:target {
  visibility: hidden;
  display: none;
  opacity: 0;
}
@keyframes everything {
  0% {opacity: 0;}
  95% {opacity: 0;}
  100% {opacity: 0.9;}
}
#container-popup {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .67);
  z-index: 999;
  animation-name: everything;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 2s;
  animation-direction: forwards;
}

.popup {
  width: 320px;
  height: 240px;
  background: #1a1a1a;
  opacity: 0.9;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  padding: 5px 0 0;
  overflow: hidden;
}

@media only screen and (min-width: 768px) {
  .popup {
    width: 500px;
    padding: 0;
  }
}
.pheader {
  font: 600 2em sans-serif;
  line-height: 1;
  padding: 4% 5% 0;
  text-transform: uppercase;
  color: #fff;
  text-align: right;
  margin: 0;
}

.popup .close {
  position: absolute;
  top: 0;
  right: 1%;
  transition: all 200ms;
  font-size: 1.25em;
  font-weight: bold;
  text-decoration: none;
  color: #aaa;
}

.popup .close:hover {
  color: #aa0000;
}

.pbody {
  font: 0.8em sans-serif;
  padding: 0 5% 1%;
  color: #f1f1f1;
  text-align: right;
}

.pbutton {
  color: #eee;
  background: #cc0000;
  float: right;
  margin: 2% 5%;
  padding: 0.5em 1em 0.25em;
  border-bottom: 0.2em solid #800000;
  font: 600 1.6em sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.065em;
  border-radius: 6px;
  text-decoration: none;
  visibility: hidden;
}

.pbutton:hover {
  color: #fff;
  border-bottom: 0.2em solid #aa0000;
}

.bounceIn {
  animation-name: bounceIn;
}

.bounceIn {
  animation-delay: 2s;
  animation-duration: 1s;
  animation-fill-mode: both;
  visibility: visible !important;
}

@keyframes bounceIn{
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

＆＃13;

<div id="container-popup">
  <div class="popup"><p class="pheader">EASY ROMANTIC<br> TIPS FOR MEN</p><a class="close" title="Close" href="#container-popup">×</a><p class="pbody">Every month you’ll receive a great<br>romantic tip direct to your inbox.<br>  SheWantsAGentleman is about making romance<br> that much easier for the average man.</p><a class="pbutton bounceIn" title="Subscribe Now for Romantic Tips" href="http://shewantsagentleman.me/subscribe">SUBSCRIBE</a></div></div>

＆＃13;

＆＃13;

＆＃13;