顯示彈出式菜單一次性

我有彈出窗口，當您進入我的網站時顯示 - 這是一個警告標籤。我只希望它出現在第一次訪問，而不是再次。目前每次點擊刷新或返回主頁時都會顯示。顯示彈出式菜單一次性

下面是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

顯示彈出式菜單一次性

回答

相關問題