Modal window "once per session"

Question

Modal window "once per session"

Navigation

#1 by (3 votes)

2

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

I created a modal window containing a warning image. And include the div's with their id's in the 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 mode is hidden and appears after 3 seconds. Follow CSS and Javascript:

In 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;
    }

No javascript

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

I made reference to the close button, including the hash #home and my idea would be, if possible, to search the hash in the url and if it has that hash, do not display the modal window for the visitor again. So do not be boring to navigate the site. Then the window would only appear if the session was closed.

jquery

asked by anonymous 12.04.2015 / 07:20

1 answer

Execution order is not followed Using Fragment, Error in Activity

score 3 · Answer 1

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

Link to the plugin:
link

Example 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 from the 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:
link

Just as MDN also has good examples:
link