I got a problem. I want to show a pop-up image, at the main page of my website only once. If i reload the page, the image should not appear, but it appear again. How can i solve this problem? I tried with session cookie but it didn't help me.
document.cookie = 'cookie=appear';
if (document.cookie = 'cookie=appear' == 'cookie=appear'){
function close_function(){
document.getElementById("popup").style.display = "none";
document.cookie = 'cookie=notappear';
}
}
if (document.cookie = 'cookie=notappear' == 'notappear'){
document.getElementById("popup").style.display = "none";
}<div id="popup" style="position: fixed; bottom: 0; left: 100px;"><a href="https://www.google.com/"><img class="alignleft" src="folder/picture.jpg" width="300" height="207"></a><button id="close" type="closebutton" onclick="close_function()">X</button></div>I can close the popup, but if i go to other page at my site and than go back it appear again, and I don't want to show it again. Just only once/browser.
I mean, if i close the Google chrome and reopen the website, the pop up should appear again. Any ideas?
The problem with your code is that whenever you reload the page you run this piece of code:
document.cookie = "cookie=appear";
So whatever the cookie was it would have been set to "cookie=appear";
const popup = document.getElementById("popup");
if(document.cookie == '' || document.cookie == 'cookie=appear') {
popup.style.display = "inline";
} else {
popup.style.display = "none";
}
function close_function() {
document.cookie = "cookie=notappear";
popup.style.display = "none";
}<div id="popup" style="position: fixed; bottom: 0; left: 100px;"><a href="https://www.google.com/"><img class="alignleft" src="folder/picture.jpg" width="300" height="207"></a><button id="close" type="closebutton" onclick="close_function()">X</button></div>This worked for me.
use LocalStorage for storing info/recording the number of visits
Have you tried to use a Bootstrap Modal instead? It helps heaps and could save a lot of time:)