Pop up only once per user - Cookies

Asked

Viewed 3,506 times

2

I’m with a POPUP on my website that appears whenever the person updates or enters it.

I want to create a function javascript (for the page is in HTML and can not use PHP) so that the POPUP only once per user with an interval time, type 1 day for it to appear again.

I’m gonna drop my code:

<html>
<head>
<style>

#popup{     
margin-top: -45px;
    position: absolute;
    width: 300px;
    height: 250px;
    left: 400px;
    top: 288px;
    z-index: 99999;
    margin: -175px auto 0px 15px;
    border: 6px solid rgba(0, 165, 71, 0.13);
    padding: 10px;
    padding-left: 30px;
    padding-top: 30px;
    background: rgba(255, 255, 255, 0.96);}

.fechar {position: absolute; top: -10px; right: -10px;}
</style>
</head>

<body>

<script src='http://ajax.googleap...2/jquery.min.js' type='text/javascript'/></script> 

<div id='popup'>
    <div class='fechar'>
        <img src='http://jconlinedigit...e_fechar.png'/> 
    </div>
</div> 

<script type='text/javascript'>
    $(document).ready(function(){
       $('.fechar').hover(function(event){
             event.preventDefault();
              $("#popup").hide();
        });
    });  
    setTimeout(function() {
       $("#popup").css("display","block");
    }, 5000);    
</script> 

</body>
</html>
javascript jquery popup

  • Use the jquery-cookie, simply create a cookie, check if it exists, display the modal, if the user clicks to close, set the cookie to false.

2 answers

1

I made a very simple example of how to work with cookies saving if the user closes the modal and preventing it from opening again:

if ($.cookie('modal') != 'false') {
  $.cookie('modal', 'true');
}

if ($.cookie('modal') == 'true') {
  alert('modal open');
}

$('.close-modal').on('click', function() {
  $.cookie('modal', 'false');
});

Example complete here.

  • Please... you can increment this in my code and make it work?

  • 5

    Hello @Gmnwebgmnweb, if you want, I can increment in your code, and also receive your salary ;)

0

Example of modal working with cookie expiring in 24h using Jquerycookies.

 $(document).ready(function () {
            // cookie para exibir uma vez por dia
            if($.cookie("modal") == null){
            setTimeout(function () {
                $('#modal').css('opacity', 1);
                var date = new Date();
                date.setTime(date.getTime() + 24 * 60 * 60 * 1000);
                $.cookie("modal", "2", {expires: date});
            }, 3000);
    }});

    function fecharModal() { $(".modal").css("display", "none"); }
  .modal { position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(0, 0, 0, 0.8); z-index:99999; opacity:0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events:auto; }
        .modal>div { width:450px; position:relative; margin:10% auto; padding:15px 15px; background:#fff; }
        .fechar { position:absolute; width:32px; right:-15px; top:-20px; text-align:center; line-height:30px; margin-top:5px; background:#ff4545; border-radius:50%; font-size:16px; color:#fff; cursor:pointer; }
   <div class="modal" id="modal">
        <div>
            <a onclick="fecharModal()" class="fechar"><img src="http://www.agripoint.com.br/ico-fechar.svg" alt="Fechar"></a>
            <a href="https://www.google.com">
                <img src="https://www.agripoint.com.br/images/pesquisa-de-adequacao.jpg" alt="">
            </a>
        </div>
    </div>

Browser other questions tagged javascript jquery popup

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