HTML
First, we'll banner advertising html code into bottom of the page, because it is finally loaded. You can also use an external js dynamically inserted into the bottom of the page. Entire HTML structure consists of a mask layer .float_layer, content layer .float_content, of which .float_bg ad section, the content can be images, text and other elements in any form of html, .float_close is the Close button, the user can turn off the display do not like advertising.
<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.goocode.net/" title='ads part'>
<div class="float_slogan"><!--advert--></div>
</a>
</div>
<div class="float_close">
<a onclick="closeFootAd()" href="#" title="Get it"></a>
</div>
</div>
</div>CSS
We use CSS to a fixed banner in the footer, and show a translucent mask effects, advertising Close button effects. We know that position: fixed element is fixed position, with the bottom, right and other property can be elements of a fixed position on the page, not with the page scrolling and scrolling. Opacity property can be achieved using the transparent effect. We give .float_slogan a background attribute, advertising picture as a background to join, of course, you can also do not need to do this, add images or text directly above the html.
.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;-webkit-transition: all 400ms;} javascript
When we first opened the page, cookie information detected javascript bottom of the page to go banner ads associated information indicated if the cookie is closed, bottom of the page does not display advertising, and vice versa bottom of the page display ads. We will call you click the Close button when closeFootAd () function, click the Close button, the banner is hidden, that is closed, and set the cookie-related values. The following is the entire operation code javascript:
window.onload = function(){
if(getCookie("footad")==0){
document.getElementById("float_mask").style.display="none";
}else{
document.getElementById("float_mask").style.display="block";
}
}
//close footer banner
function closeFootAd() {
document.getElementById("float_mask").style.display="none";
setCookie("footad","0");
}
//set cookie
function setCookie(name,value){
var exp = new Date();
exp.setTime(exp.getTime() + 1*60*60*1000);//valid time 1 hour
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
//get cookies fun
function getCookie(name){
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if(arr != null) return unescape(arr[2]); return null;
} Knowledge about the cookie, the site has made detailed introduction articles, please click the tags: cookie session
