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

Asked

Viewed 73 times

0

I made a modal, this java code that 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 appear only on the user’s first visit?

javascript jquery html

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();
    });
}

  • Thanks for the help, only now he doesn’t close the modal anymore, with this code

  • Well, I can’t reproduce the problem to help you, try a little more and return here with some message.

  • i entered the site Jscookies, in my index I put the <Script src = "js.cookie.js"> </script> and put what you advised in ?

  • I don’t know, I need to see your code more broadly to understand the problem.

0

You can store this information in the Customer, whether through Cookies, localStorage, sessionStorage or Indexeddb.

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

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

So you can use localStorage or sessionStorage, however sessionStorage will disappear once the tab or browser is closed, so if you want this information to remain until the end of time (or the user cleans Storage), you should choose localStorage.

recalling that the localStorage a key and a value, both as string, if you need to store an object, you should make use of the JSON.parse and of 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);

Like the Snippet wheel sandbox, cannot use localStorage in it, so the above example will not work, however you can open it in Jsfiddle

  • Thanks anyway, but where I put all this, I’m extremely beginner, and I don’t want to be a programmer, I don’t want to be a java dominator, etc., I just want to learn what I need to make my site work. I really appreciate you helping me out.

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.