The title might be a little confusing, so let me clarify here:
I have implemented a popup that appears in the bottom right corner of a specific page on my website. The popup is working as intended (it shows up when the page is initially opened and can be closed by clicking the 'x' icon). However, when I navigate away from the page to other sections of the site and then return, the popup resets and reappears even if it was previously closed. Is there a way to keep the popup hidden until the tab is closed or the visitor leaves the website?
function closePopup() {
document.getElementById("pop-up").classList.toggle("hide");
}#pop-up {
position: absolute;
bottom: 7%;
right: 0;
height: 50%;
width: 30%;
background: #F0F0F0;
border-top: solid 5px rgb(25, 28, 31);
border-bottom: solid 5px rgb(25, 28, 31);
border-left: solid 5px rgb(25, 28, 31);
}
#pop-up p {
text-align: center;
margin: 5%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.hide {
opacity: 0;
animation-name: hide;
animation-iteration-count: 1;
animation-duration: 0.75s;
}
@keyframes hide {
from {
opacity: 1;
}
to {
opacity: 0;
}
}<div id="pop-up">
<i onclick="closePopup()" class="fas fa-times fa-2x" style="padding: 4%; float:right;"></i>
<p>Feature your logo here! If you are interested in becoming a sponsor, please contact us at <a href="mailto:sponsor@example.com">sponsor@example.com</a>.</p>
</div>