GOOCODE - Find your code/scripts

3 Whenever significant during the holiday season, the major mainstream Home will put festive costumes, designers typically use a substantial background pictures to get a better visual impact, of course, also taking into account that some users are not accustomed to this great background, then place the "Close" button in the background is necessary, users simply click on the "Close background" button, a substantial background image will disappear.

We use javascript to control the background image to show and hide, when you click the close button, so that the page does not load control CSS background image while recording COOKIE parameters and set the cookie is valid, then refresh the page in the cookie is valid, is not reloading background, and if the cookie fails, the background image will reload.
HTML
General background image on the page is the close button of the head, we put off the background of the button at the top of the page, of course, this button is a good picture.

<div id="top">
	<em id="close_btn" title="CLOSE Background"></em>
</div>

CSS
Also need to prepare for the big background image, we find from the Internet queen background use of them, to do simple page with a CSS layout.

*{margin:0; padding:0} 
body{font:12px/18px "Microsoft Yahei",Tahoma,Arial,Verdana,"\5b8b\4f53", sans-serif;color:#808080;} 
#top{clear:both;width:1000px;height:60px;margin:0 auto;overflow:hidden;position:relative;} 
#close_btn{width:60px;height:20px;position:absolute;right:0;bottom:25px;cursor:pointer; 
display:block;z-index:2;} 

After deploying over css, page also plays no effect, so we need to use javascript to load the background image.
javascript
When you first load the page (in this case has not yet set a cookie, etc.), of course we wanted to load background images, display the full results page. When we click on the "Close" button, this time the page has loaded javascript will get rid of background images that do not show up, and set the cookie, the cookie expiration time by controlling a large background image is displayed. That is, when the next refresh the page, if the cookie has not expired, it will not load large background image, otherwise load large background image, see the code:

$(function(){
	if(getCookie("mainbg")==0){
		$("body,html").css("background","none");
		$("#close_btn").hide();
	}else{
		$("body").css("background","url(images/body_bg.jpg) no-repeat 50% 0");
		$("html").css("background","url(images/html_bg.jpg) repeat-x 0 0");
		$("#close_btn").show().css("background","url(images/close_btn.jpg) no-repeat");
	}
	
	$("#close_btn").click(function(){
		$("body,html").css("background","none");
		$("#close_btn").hide();
		SetCookie("mainbg","0");
	});
}

Obviously, we are to control the load background page elements by setting a CSS background background properties, and by getCookie () and setCookie () two custom functions to read and set the cookie.

//set cookie
function SetCookie(name,value){
	var exp = new Date(); 
	exp.setTime(exp.getTime() + 1*60*60*1000);//1h valid
	document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
//get cookies function
function getCookie(name){
	var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
	if(arr != null) return unescape(arr[2]); return null;
}

In setting the cookie is valid, we can set according to the actual demand for 10 days, two weeks, etc. The paper is only set one hour in order to set up demo.