为什么我的“弹出窗口”在第二次点击时不显示？

Question

我上面的代码在这里工作正常（如果我运行代码），但它导致我在我的网站上出现错误。发生的情况是，第一次单击所有链接都可以正常工作，但是当我尝试第二次单击时，它会显示空白页面，并且您无法单击页面上的任何位置，因此我必须刷新或单击后退按钮。

.overlay {

  position: fixed;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  background: rgba(0, 0, 0, 0.7);

  transition: opacity 500ms;

  visibility: hidden;

  opacity: 0;

    overflow:hidden;

  z-index:9999999;

}

.overlay:target {

  visibility: visible;

  opacity: 1;

}

.popup {

  margin: 70px auto;

  padding: 20px;

  background: #fff;

  border-radius: 5px;

  width: 30%;

  position: relative;

  transition: all 5s ease-in-out;

}

.popup h2 {

  margin-top: 0;

  color: #333;

  font-family: Tahoma, Arial, sans-serif;

}

.popup .close {

  position: absolute;

  top: 20px;

  right: 30px;

  transition: all 200ms;

  font-size: 30px;

  font-weight: bold;

  text-decoration: none;

  color: #000;

}

.popup .close:hover {

  color: #06D85F;

}

.popup .content {

  max-height: 30%;

  overflow: auto;

}

@media screen and (max-width: 700px){

  .popup{

    width: 70%;

  }

}

Answer 1

根据您的指示，我发现您网站中的theme.js文件存在问题。每当您单击弹出窗口的关闭“x”按钮时，该文件中第 105 行的函数就会触发，并在弹出窗口中添加内联 css，并将弹出窗口 div 的不透明度降低到“opacity:0”。解决方案：您只需更改该类名称并删除单击即可作为临时解决方案。或者您可以编辑 theme.js 文件并减少代码并获得更好的性能...选择是你的，我希望这对你有帮助。否则您可以告诉我寻求任何帮助！谢谢你！快乐编码！！！

Answer 2

它在堆栈溢出代码片段中完美运行。我认为您当地的环境可能存在一些问题。不过，如果您需要任何帮助，请随时问我！谢谢你！快乐编码！