Hide DIV using cookies by user action, in case click on close buttom or popup image

Question

I have a popup that is in the lower right corner and came together to scroll the page down, however to close the popup or by clicking on the popup, I wish the browser remembers the User click action and did not show more popup at least to the same exit the browser, through cookies, please someone help me? see my code below:

<style>
.popup-lateral{
  width:302px;
  height:0;
  z-index:999;
  position:fixed;
  bottom:0;
  right:60px;
  background:transparent url('popup-bl-pro.png') no-repeat top center;
}

.popup-lateral .link{
  width:293px;
  height:192px;
  position:absolute;
  top:8px;
  left:0;
  z-index:1;
}

.popup-lateral .fechar{
  width:30px;
  height:30px;
  position:absolute;
  top:2px;
  right:0;
  z-index:2;
}
</style>

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.3.1/jquery.cookie.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script>
$(document).ready(function(){
  $("#fechar-popup").click(function(){
     $("#popup-lateral").hide();
  });
});
</script>

<div style="height:2000px;background:#EEE">teste
</div>

<div id="popup-lateral">
        <div class="popup-lateral" style="height: 203px;">
            <a class="fechar" id="fechar-popup" href="javascript:void(0);" title="Fechar"></a>
            <a class="link" href="/bl/bl.html"></a>
        </div>
    </div>

What exactly is your problem? You don't want to search in the Internet how to set/get cookies using JavaScript and want someone to do it for you? — Regent, Apr 10 '15 at 12:03
I've been reading posts and searched on google, but I do not set cookies to when the User clicks to close the popup or click it and direct to another page and close as well the popup, at least until it closes the browser (destroy cookie) — Kleber Gitti, Apr 10 '15 at 12:08
Setting/Gettting cookies: http://stackoverflow.com/questions/4825683/how-do-i-create-and-read-a-value-from-cookie and http://www.w3schools.com/js/js_cookies.asp — Brian, Apr 10 '15 at 12:21
About the question above, can anyone give me the solution to my problem ? Its urgent, i dont have time to programing this. please, help me !!! — Kleber Gitti, Apr 10 '15 at 12:33

score 0 · Answer 1 · answered Apr 10 '15 at 13:30

0

Your answer is here: http://www.w3schools.com/js/js_cookies.asp

Set a cookie upon the user acount Check for the cookie being set upon loading the page

answered Apr 10 '15 at 13:30

Kman

1

score 0 · Answer 2 · answered Apr 10 '15 at 15:05

It looks like school assignment, but anyways...

What you could use is localStorage in your browser. It has all the functionality you need. It's persistent if you close browser and reopen.

On page load you do

if (!(localStorage.getItem('popupStatus'))) 
localStorage.setItem('popupStatus', 'visible');

This will only be there to initialize localStorage popupStatus if user does not have it already and set its value to visible

Later when user clicks on your popup, inside the click function you remember that user has closed it by setting popupStatus in closed state

localStorage.setItem('popupStatus', 'closed');

Also on page load you can add at the end something like this, so if user has already closed this popup you hide it from the screen.

if (localStorage.getItem('popupStatus') === 'closed') 
$('#popup-lateral').hide();

Hide DIV using cookies by user action, in case click on close buttom or popup image

2 Answers2