0

When I click the back button on the browser (the latest Firefox) after closing a popup on my dev site, the back button doesn't work, and the popup reopens, which causes a loop where the user can't use their back button.

I think it's either redirect (the # in the URL) or session related. But none of the cookie scripts seem to work. I'd like the popup to only open if the user clicks the button to open it.

Th site is currently offline. I'm just hard-coding it with a browser and a code editor at the moment.

I'm hoping someone can tell me what I'm missing. It's a pretty simple CSS popup. Here is the code for the popup:

/*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>
Manish Patel
  • 3,648
  • 1
  • 14
  • 22

1 Answers1

0

Have you tried with this script?

      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;
            }
        }

I also found anther article for you : [question] Close pop up on back button

Community
  • 1
  • 1
vuquanghoang
  • 370
  • 2
  • 5
  • 15
  • I've tried that script, and no joy so far, but I'm wondering if I need to change any of the variables. Thanks for the article. I'll try the answers there too. –  Nov 17 '16 at 10:51
  • Can you try to paste the code to codepen or jsfiddle? – vuquanghoang Nov 17 '16 at 11:09
  • This is my first try on CodePen, so hopefully this works: http://codepen.io/anon/pen/wooWyy?editors=1111 –  Nov 17 '16 at 11:37