CSS Popup overriding browser back button - css

Question

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="#">×</a>
<h2>Title Goes Here...</h2>
<div class="content">
Text goes here....
</div>
</div>
</div>

Answer 1

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