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

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

它在堆栈溢出代码片段中完美运行。我认为您当地的环境可能存在一些问题。

不过，如果您需要任何帮助，请随时问我！

谢谢你！快乐编码！