显示弹出式菜单一次性

我有弹出窗口，当您进入我的网站时显示 - 这是一个警告标签。我只希望它出现在第一次访问，而不是再次。目前每次点击刷新或返回主页时都会显示。显示弹出式菜单一次性

下面是JavaScript代码（只要有人点击了 '警告按钮输入'）：

<script> 
"use strict" 
warning_popup(); 

function warning_popup() { 
    addEventListener('load', start); 

    function start() { 
     // popup block background 
     var bkg = document.createElement("div"); 
     bkg.id = "warning-background"; 
     document.body.insertBefore(bkg, document.body.firstChild); 

     // popup window 
     var box = document.createElement("div"); 
     box.id = "warning-window"; 
     document.getElementById("warning-background").appendChild(box); 

     // warning title 
     var title = document.createElement("div"); 
     title.id = "warning-title"; 
     title.className = "page-title-wrapper page-title"; 
     title.innerHTML = "<h1>Binge Eating Disorder<\h1>"; 
     document.getElementById("warning-window").appendChild(title); 

     // warning description 
     var desc = document.createElement("div"); 
     desc.id = "warning-desc"; 
     desc.className = "page-desc"; 
     desc.innerHTML = "<p>Binge Eating Disorder is disease that I take very seriously.<p>"; 
     document.getElementById("warning-window").appendChild(desc); 

     // warning button enter 
     var enter = document.createElement("div"); 
     enter.id = "warning-enter"; 
     enter.className = "page-desc"; 
     enter.innerHTML = "<p>View</p>"; 
     document.getElementById("warning-window").appendChild(enter); 


     // warning button back 
     //var back = document.createElement("div"); 
     //back.id = "warning-back"; 
     // back.className = "page-desc"; 
     // back.innerHTML = "<p>Take Me Back</p>"; 
     // document.getElementById("warning-window").appendChild(back); 

     // listens for button clicks 
     document.querySelector("#warning-enter").addEventListener("click", function() { 
      document.querySelector("#warning-background").style.visibility = "hidden"; 
     }); 
     document.querySelector("#warning-back").addEventListener("click", function() { 
      window.history.back(); 
     }); 
    } 
}

来源

2016-07-19 user3176492

解决方法很简单只是设置有失效之日起一年一个javascript的cookie从现在每次检查页面加载。如果该cookie存在，则不运行show_popup函数 –

我觉得localStorage可以解决你的问题。考虑这个例子：

window.onload = init; 

function init() { 
    if (localStorage.getItem('first_time') === "undefined" || localStorage.getItem('first_time') === null) { 
    // Set the storage key and show the warning—but only this one time 
    localStorage.setItem('first_time', true); 
    showWarning(); 
    } 
} 

function showWarning() { 
    console.log("Showing warning..."); 
}

加载此代码将只触发一次showWarning函数。

https://jsfiddle.net/ez2qqpbx/

来源

2016-07-19 07:36:59

显示弹出式菜单一次性

回答

相关问题