Javascript：弹出框，如果单击“不显示”则不显示

Question

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> 

Answer 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