覆盖透明div一次单击

Question

I referred to this thread to get a transparent div to display on top of the web site content and make it disappear when clicking on it...

however, when someone visits a page within the site and they click on the home button they are displayed the transparent div again... is there a way to have the div appear only one time and do not appear again after they close it?

Answer 1

The best way to do is by setting a cookie. On this way, you can hide it forever, or hide it for a specified time.

document.cookie = "transparentdivShow = false";

And now you can check if this cookie exists, and if so, don't show the div:

if(document.cookie.indexOf("transparentDivShow") >= 0) {
    return true; // Don't show it
} else {
    return false; // Show the div
}

Answer 2

As the above poster mentioned, you could use a cookie. Alternatively, you could use HTML5 Local Storage! Local Storage allows data to be stored locally within a user's browser.

In this instance, you could have something like a clickcounter that counts to see if the clickcounter is greater than 1. If it is greater than 1, give the div a hidden attribute or just get rid of it.

if (sessionStorage.clickcounter) {
 <div hidden> You can't see me. I'm invisible. </div>
} else {
 sessionStorage.clickcounter = 1;
 <div visible> Hi! I'm not transparent. </div>
}

I hope that this helps. Here's a page with more information on it as well! http://www.w3schools.com/html/html5_webstorage.asp