How do I make my Modal only appear on the customer's first visit?

0

I made a modal, this java code I used

    $(document).ready(function(){
    $(".janelaModal, .fundoModal").fadeIn();        
    $(".botao").click(function(){
    $(".janelaModal, .fundoModal").fadeIn();        
    }); 
    $(".fecharModal, .fundoModal").click(function(){
    $(".janelaModal, .fundoModal").fadeOut();});});

How do I make modal only appear on the user's first visit?

    
asked by anonymous 04.06.2016 / 14:50

2 answers

0

You can use JsCookies

if (Cookies.get('visita') != true) {
    Cookies.set('visita', true);
    $(".janelaModal, .fundoModal").fadeIn();        
    $(".botao").click(function(){
        $(".janelaModal, .fundoModal").fadeIn();        
    }); 
    $(".fecharModal, .fundoModal").click(function(){
        $(".janelaModal, .fundoModal").fadeOut();
    });
}
    
04.06.2016 / 15:30
0

You can store this information in the Client, either through Cookies, localStorage, sessionStorage or IndexedDB.

Taking into account that when storing in a cookie this information will traffic between the client and its server in each request, thus generating additional traffic of information that possibly will not be used on the server, besides the question that a cookie has an expiration date, so I'd say Cookies are not a good idea for your scenario.

On the other hand, IndexedDB gives you too big a structure for this problem, it would be like killing an ant with a nuclear fusion bomb.

Then you can use localStorage or sessionStorage , but sessionStorage will disappear as soon as the tab or browser is closed, so if you want this information to remain until the end of time (or the user clears the Storage) , you should choose LocalStorage.

Remembering that localStorage a key and a value, both as string , if you need to store an object, you should use JSON.parse and JSON.stringify .

var json = localStorage.getItem("dados de acesso");
var dados = {};

if (!json) {
  dados = { primeiroAcesso: true };
} else {
  dados = JSON.parse(json);
}

console.log(dados);

if (dados.primeiroAcesso) {
  /* Abra o seu dialog */
  
  dados.primeiroAcesso = false;
  localStorage.setItem("dados de acesso", JSON.stringify(dados));
}

console.log(dados);

Since Snippet runs sandbox , you can not use localStorage in it, so the above example will not work, however you can open it at JSFiddle

    
04.06.2016 / 17:01