Modal window "once per session"

Asked

Viewed 682 times

2

Good people, it may seem simple and easy to solve. But for those who do not understand anything of the language, it ends up being a torment. Come on:

I created a modal window containing a warning image. And it includes the div’s with the respective id’s in html:

<div id="fundo">
<div class="janelamodal">
    <img src="aviso.png" title="Aviso Vapores e Sabores" alt="Vapores e Sabores" />
        <div class="fecharmodal">
            <a href="#home" title="Fechar">
                <img src="closebutton.png" alt="Fechar" title="Fechar" border="0" />
            </a>

        </div>
</div>

This modal is hidden and appears after 3 seconds. It follows CSS and Javascript:

In the CSS

*{margin:0; padding:0;}

#fundo{
    width:100%;
    height:100%;
    background:url(fundo.png);
    position:fixed;
    top:0;
    left:0;
    display:none;
}

#fundo .janelamodal{
    width:350;
    height:260px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-175px;
    margin-top:-130px;
    padding:5px;
    background:#FFF;
    border-radius:4px;
}

#fundo .fecharmodal{
    position:absolute;
    right:-11px;
    top:-11px;
    }

In javascript

$(document).ready(function(){
    setTimeout(function(){
        $("#fundo").fadeIn();
    $(".fecharmodal").click(function(){
        $("#fundo").fadeOut();
    });
    }, 3000);
});

I referenced the close button, including the hash #home and my idea would be, if possible, to do a hash search on the url and if you have this hash, not to display the modal window to the visitor again. So you don’t get bored browsing the site. Then the window would only appear if the session was closed.

jquery

1 answer

3

Using Jquery with a plugin to work with cookies we can reach the desired result:

Link to the plugin:
http://plugins.jquery.com/cookie/

Example of application in your code:

$(document).ready(function(){
   var mostrou = $.cookie('mostrou');
   if (mostrou == null) {
      setTimeout(function(){
         $.cookie('mostrou','sim');
         $("#fundo").fadeIn();
         $(".fecharmodal").click(function(){
            $("#fundo").fadeOut();
         });
      }, 3000);
   }
});

First we retrieve the cookie by name "showed".
If it is null, we show the modal and set it to "yes".
If it exists, the modal does not appear.


To use cookies in pure JS, Sozão has some references:
https://stackoverflow.com/questions/4825683

Just as MDN also has good examples:
https://developer.mozilla.org/en-US/docs/Web/API/document/cookie

Browser other questions tagged jquery

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