You can use LocalStorage (LS), which is also a cookie. Just save the primitive value from the current date and create another date by adding +24 hours to the current date and then make the comparison. If the LS does not exist it shows the popup and sets its value to +24 hours. If it exists, make the comparison, if it is smaller it shows the popup and it redefines the time.
Considering that the id of your popup is #popup
, type:
<div id="popup">
CONTEÚDO DA POPUP
</div>
Hide the popup div in CSS:
#popup{ display: none }
And it would look like this:
document.addEventListener("DOMContentLoaded", function(){
// pega o elemento da popup
var popup = document.getElementById("popup");
// atribui o LS a uma vaviável
var ls = localStorage.getItem("popup");
// pega a data atual
var data = new Date();
// variável para guardar a data atual
var data_atual = data.valueOf();
// adiciona 24 horas à data atual
var data24 = data.setHours(data.getHours()+24);
// verifica se o LS é menor do que a data atual
// ou se o LS for inexistente
if(ls < data_atual){
// mostra a popup
popup.style.display = "block";
// cria/redefine o LS com o nome "popup" com a data +24 horas
localStorage.setItem("popup", data24);
}
});
5-second test:
Because here in the sandbox LS does not work, change the line:
var data24 = data.setHours(data.getHours()+24);
To
var data24 = data.setSeconds(data.getSeconds()+5);
Please reload your page within 5 seconds and you will see that the popup will not appear. After 5 seconds it will appear 1 time, and so on.
I'll leave the leaked code below without comment:
document.addEventListener("DOMContentLoaded", function(){
var popup = document.getElementById("popup");
var ls = localStorage.getItem("popup");
var data = new Date();
var data_atual = data.valueOf();
var data24 = data.setHours(data.getHours()+24);
if(ls < data_atual){
popup.style.display = "block";
localStorage.setItem("popup", data24);
}
});