I have popup code below and i want to show this popup for per user only one time if refresh page or visit other page.

Anybody helps?

Thanks in advance.

I tried some code but didnt work for me.

<div id="popup">
     <div id="close">&times;</div>
MY CONTENT
    </div>

  <script type="text/javascript">
window.addEventListener("load", function(){
    setTimeout(
        function open(event){
            document.querySelector("#popup").style.display = "block";
        },
        0000 
    )
});


document.querySelector("#close").addEventListener("click", function(){
    document.querySelector(".popup").style.display = "none";
});
    </script>

CodePudding user response：

Use a cookie to remember.

window.addEventListener("load", function(){
    //check if cookie exists. 
    if (document.cookie.includes("popup")) {
        setTimeout(
            function open(event){
                document.querySelector("#popup").style.display = "block";
                //set cookie since it didn't exist previously
                document.cookie = "popup=true" 
            },
            0000 
    })
});


document.querySelector("#close").addEventListener("click", function(){
    document.querySelector(".popup").style.display = "none";
});

CodePudding user response：

I think using localstorage will do the trick. It won't work here cause stack doesn't allow localstorage

if(localStorage.getItem('closeMe') == 'yes')document.getElementById("popup").classList.add("closeMe");

document.querySelector("#close").addEventListener("click", function(){
localStorage.setItem('closeMe', 'yes');
if(localStorage.getItem('closeMe') == 'yes')document.getElementById("popup").classList.add("closeMe");
    


});

.closeMe{
   display:none;
   }

<div id="popup">
     <div id="close">&times;</div>
MY CONTENT
    </div>