Question

当我在我的开发站点上关闭弹出窗口后单击浏览器上的后退按钮（最新的Firefox）时，后退按钮不起作用，弹出窗口重新打开，这会导致用户无法使用的循环他们的后退按钮。

我认为它是重定向（URL中的＃）或与会话相关的。但是没有一个cookie脚本似乎有效。我希望弹出窗口仅在用户单击按钮打开时才会打开。

该网站目前处于离线状态。我现在只是用浏览器和代码编辑器对其进行硬编码。

我希望有人可以告诉我我错过了什么。这是一个非常简单的CSS弹出窗口。这是弹出窗口的代码：

/*Popup*/
.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;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}
.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 50%;
  position: relative;
  transition: all 5s ease-in-out;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #08899e;
}
.popup .content {
  max-height: 50%;
  overflow: auto;
}

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}

<a class="button" href="#popup1" data-rel="back">Let me Pop up</a>. Add more text here...

<div id="popup1" class="overlay">
  <div class="popup">
    <a class="close" href="#">&times;</a>
    <h2>Title Goes Here...</h2>
    <div class="content">
      Text goes here....
    </div>
  </div>
</div>

Answer 1

您是否尝试过使用此脚本？

      if (window.location.hash) {
            if (window.history && history.pushState) {
                window.history.pushState("", document.title, window.location.pathname);
            } else {
                // Prevent scrolling by storing the page's current scroll offset
                var scroll = {
                    top: document.body.scrollTop,
                    left: document.body.scrollLeft
                };
                window.location.hash = '';
                // Restore the scroll offset, should be flicker free
                document.body.scrollTop = scroll.top;
                document.body.scrollLeft = scroll.left;
            }
        }

我也找到了另一篇文章：[问题] Close pop up on back button

CSS Popup覆盖浏览器后退按钮

1 个答案: