JS Cookie Implementation Close open Web page Background example

We use JavaScript to control the display of background pictures and hidden, when clicked on the Close button, control CSS so that the page does not load the background map, while recording cookie-related parameters, and set the validity of the cookie, then in the cookie Lifetime Refresh page, will not load the background image, If the cookie fails, the background picture is reloaded.
Html

General background picture of the Close button is placed on the head of the page, we put the button on the top of the page to close the background, of course, this button is a good picture.

The code is as follows	Copy Code
<div id= "Top" > <em id= "close_btn" title= "Off background" ></em> </div>

Css

Also need to prepare large background picture, we look for a large background image from the Internet to use, to do a simple page layout with CSS.

The code is as follows	Copy Code
*{margin:0; padding:0} body{font:12px/18px "Microsoft Yahei", Tahoma,arial,verdana, "5b8b4f53", Sans-serif; #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 the CSS has been deployed, the page has no effect and we need to use JavaScript to load the background picture.
Javascript

When the page is loaded for the first time (no cookies are set at this time), of course, the background picture is loaded to show the full page effect. When we click on the "Close" button, this time JavaScript will be the page has loaded the background image to kill, that is not displayed, and set the cookie, through the expiration of the cookie to control the large background picture is displayed. That is, the next time the page is refreshed, if the cookie does not expire, the large background image will not be loaded, or the large background image should be loaded, please look at the code:

The code is as follows

Copy 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"); } Click Close $ ("#close_btn"). Click (function () { $ ("body,html"). CSS ("Background", "none"); $ ("#close_btn"). Hide (); Setcookie ("MAINBG", "0"); }); })

Obviously, we control the loading of the background image by setting the CSS background background property of the page element, and we read and set the cookie by GetCookie () and Setcookie () two custom functions.

code is as follows

copy code

//Set Cookies function Setcookie (name,value) {     var exp = new Date ();      exp.settime (E Xp.gettime () + 1*60*60*1000);//valid for 1 hours     document.cookie = name + "=" + Escape (value) + "; expires=" + Exp.togmtstring (); } //Fetch cookies function function GetCookie (name) {     var arr = document.cookie.match (new REGEXP ("(^| )" +name+ "= ([^;] *)(;|$)"));     if (arr!= null) return unescape (arr[2); }

When setting the cookie expiration date, we can set 10 days and half months according to the actual requirement, this article only sets up 1 hours for the demonstration, please see

Full instance

The code is as follows

Copy Code

<! DOCTYPE html> <meta charset= "Utf-8" > <script src= '/notfound.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"); }); }) </script> </body>

Small hint, here's the background picture everyone add it here is not available download, core background code picture

The code is as follows	Copy Code
$ ("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");

These are the three sentences.