Javascript: Popup box, don't show if clicking "Don't Show"

much like magazine websites, there's often a popup box that you're greeted with on visit asking to subscribe.
I basically have the same thing but I want it to not show up for a certain amount of time, let's say a week, if they click "Don't show".

fid: https://jsfiddle.net/jzhang172/jh3L5kox/

window.onload=func1();

function func1(){
$('.pop-up').fadeIn();
}

$('.nope').click(function(){
$('.pop-up').fadeOut();
});
body,html{
  padding:0;
  margin:0;
}
*{
  box-sizing:border-box;
}
.overlay{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:black;
}
.pop-up {
    height: 40vw;
    width: 40vw;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -20vw;
    margin-top: -20vw;
    background: rgba(255, 255, 255, 0.83);
    text-align: center;
    border:1px solid black;
        box-shadow: 1px 1px 39px 5px #584B4B;
}
.nope{
  text-decoration:underline;
  cursor:pointer;
  font-size:13px;
}
.pop-up{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay">
<div class="pop-up">
  <h2>Subscribe to be Awesome</h2>
  <span class="nope">Don't be awesome</span>
  
</div>
</div>

Answers 1

  • You can use cookies to show/hide the popup.

    1- Set a cookie, when user clicks to close the popup.

    $('.nope').click(function(){
     document.cookie="mycookie=my_cookie_value; expires=Thu, 28 Apr 2016 12:00:00 UTC; path=/"; 
     $('.pop-up').fadeOut();
    });
    

    2- Get the cookie on document load. if your cookie exists, hide the popup else show

    function func1(){   
    var x = document.cookie; //this will give you all the cookies set on the browser. Check if your cookie exists
    if(!cookie_exist){
        $('.pop-up').fadeIn();
       }
    }
    

    You need to check your cookie every time the browser loads. Replace the variable and if condition with your values. For more information on cookies visit http://www.w3schools.com/js/js_cookies.asp


Related Articles