CSS+JS cookie Implementation of fixed footer AD Bar example

Often see some sites in order to attract users attention, at the bottom of the page to place fixed banner ads, users scroll the page, banner ads have been fixed at the bottom of the page, does not scroll with the page scrolling, of course, generally allow users to close the banner, and set a certain period of time no longer show this This article will introduce the use of Css+cookie to achieve this effect.

HTML

First, we put the HTML code for the banner ad at the bottom of the page because it was last loaded. You can also use external JS to dynamically insert to the bottom of the page. The entire HTML structure consists of a mask layer. Float_layer, a content layer. Float_content, where. FLOAT_BG for advertising, content can be pictures, text and other forms of HTML elements,. Float_close is the Close button, Users don't like ads to turn off the display.

<div class= "Float_mask" id= "Float_mask" >
<div class= "Float_layer" >
</div>
<div class= "Float_content clearfix" >
<div class= "FLOAT_BG" >
<a target= "_blank" href= "http://www.helloweba.com/" title= ' advertising section ' >
<div class= "Float_slogan" ><!--advertising content--></div>
</a>
</div>
<div class= "Float_close" >
<a onclick= "Closefootad ()" href= "#" title= "I Know" ></a>
</div>
</div>
</div>

Css

We use CSS to keep the banner in the footer, and to show the effect of the translucent mask effect, the advertisement Close button, and so on. We know that position:fixed is a fixed element position, with bottom, right and other attributes can be fixed on the page to a certain location, not with the page scrolling and scrolling. You can use the Opacity property to achieve transparent effects. We give. Float_slogan a background attribute that adds an ad picture as a background, but you can also add pictures or text directly to the HTML above, without having to do so.

. float_mask{position:fixed;z-index:19999;display:none;width:100%;right:0; bottom:0;height:105px;_bottom:auto;_ Width:100%;_position:absolute;
_top:expression (eval (document.documentelement.scrolltop+ document.documentelement.clientheight-this.offsetheight-(parseint (this.currentstyle.margintop,10) | | 0)-(parseint (this.currentstyle.marginbottom,10) | | 0));}
. Float_layer{position:absolute;left:0;top:0;z-index:1;width:100%;height:100%;background: #071828; Filter:alpha ( OPACITY=80); opacity:0.80;}
. float_content{position:relative;z-index:2;width:1005px;height:100%;margin:0 auto;padding-left:70px;
. FLOAT_BG,. float_close{float:left;
. Float_bg{position:relative;width:820px;height:135px;margin-top: -27px;
. Float_slogan {Position:absolute background:url ("Footer_ad.png") 0 0 no-repeat;
. Float_slogan{left:0;bottom:0;width:800px;height:135px;cursor:pointer;}
. float_close{width:60px;margin-top:30px;}
. float_close a {display:block;width:53px; height:52px margin-left:7px; Background:url ("Close.png") 0 0 No-repeat;-we Bkit-transition:all 400ms;}

Javascript

When we first open the page, JavaScript first detects the cookie information associated with the bottom banner ad, and if the information that the cookie represents is closed, the bottom of the page is not displayed, and the page bottom advertisement is displayed. When we click on the Close button, we call the Closefootad () function and click the Close button to hide the banner, close it, and set the cookie-related value. Here's the whole JavaScript code of action:

Window.onload = function () {
if (GetCookie ("Footad") ==0) {
document.getElementById ("Float_mask"). style.display= "None";
}else{
document.getElementById ("Float_mask"). style.display= "Block";
}
}
Close Bottom Ads
function Closefootad () {
document.getElementById ("Float_mask"). style.display= "None";
Setcookie ("Footad", "0");
}

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