HotStyle主题右下角jquery弹出公告
转自：http://www.icdiary.com/html/2227.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
body,input,button,select,textarea{font:12px/1.5 Lucida Grande,Microsoft Yahei,Arial,Calibri,Trebuchet MS,Helvetica,Hiragino,STHeiti,Microsoft Jhenghei,sans-serif;color:#444}
.focus {
position: fixed;
right: 5px;
bottom: 5px;
z-index: 300;
overflow: hidden;
width: 250px;
border: 1px solid #AAA;
padding: 0 10px;
background: white;
}
.bm, .bn {
margin-bottom: 10px;
}
.bm_h {
padding: 0 10px;
height: 40px;
border-bottom: 4px solid #009AD9;
line-height: 40px;
white-space: nowrap;
overflow: hidden;
}
.cl {
zoom: 1;
}
.y {
float: right;
}
a {
color: #333;
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
font-size: 1em;
}
body, ul, ol, li, dl, dd, p, h1, h2, h3, h4, h5, h6, form, fieldset, .pr, .pc {
margin: 0;
padding: 0;
}
.bm_c {
background: white;
}
.bbda {
border-bottom: 1px dashed #CDCDCD;
}
.cl {
zoom: 1;
}
.xld dt {
padding: 8px 0 5px;
font-weight: 700;
}
.bm_c h2 a, .bm_c dt a {
padding-right: 10px;
color: #4A4E52;
}
.focus dt a {
color: #0060A6;
font-size: 12px;
}
.xi2, .xi2 a, .xi3 a {
color: #266CB5;
}
.xld dd {
margin-bottom: 8px;
}
.hm {
text-align: center;
}
.ptn {
padding-top: 5px!important;
}
a:hover, * a:hover {
color: #F60 !important;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
function setCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
} else {
var expires = "";
}
document.cookie = name + "=" + value + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1, c.length);
}
if (c.indexOf(nameEQ) == 0) {
return c.substring(nameEQ.length, c.length);
}
}
return null;
}
</script>
<script>
$(document).ready(function() {
if(getCookie("nofocus_8")==1){
$('#sitefocus').css('display','none');
}else{
$('#sitefocus').css('display',' ');}
});
</script>
</head><body>
<br><br>
此例子启用了cookie记录，在这一窗口中，只要没有关闭网页点击关闭产生的cookie一直存在，此时无论怎么刷新都不会出现。点击清除cookie后刷新网页可以让关闭的关闭的窗口显示。<br><br>
<a href="javascript:;" onclick="setCookie('nofocus_8',2,1*3600);$('#sitefocus').css('display',' ');" title="cookie"><font color=red>清除cookie</font></a>
<div class="focus" id="sitefocus" >
<div class="bm">
<div class="bm_h cl">
<a href="javascript:;" onclick="setCookie('nofocus_8',1,1*3600);$('#sitefocus').css('display','none');" class="y" title="关闭">关闭</a>
<h2>临时公告</h2>
</div>
<div class="bm_c">
<dl class="xld cl bbda">
<dt><a href="#" class="xi2" target="_blank">畅游论坛之新手指南</a></dt>
<dd>漫游论坛、新手必备之良品。请新注册会员仔细阅读本指南以尽快融入论坛。</dd>
</dl>
<p class="ptn hm"><a href="#" class="xi2" target="_blank">查看 »</a></p>
</div>
</div>
</div>
</body></html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
body,input,button,select,textarea{font:12px/1.5 Lucida Grande,Microsoft Yahei,Arial,Calibri,Trebuchet MS,Helvetica,Hiragino,STHeiti,Microsoft Jhenghei,sans-serif;color:#444}
.focus {
position: fixed;
right: 5px;
bottom: 5px;
z-index: 300;
overflow: hidden;
width: 250px;
border: 1px solid #AAA;
padding: 0 10px;
background: white;
}
.bm, .bn {
margin-bottom: 10px;
}
.bm_h {
padding: 0 10px;
height: 40px;
border-bottom: 4px solid #009AD9;
line-height: 40px;
white-space: nowrap;
overflow: hidden;
}
.cl {
zoom: 1;
}
.y {
float: right;
}
a {
color: #333;
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
font-size: 1em;
}
body, ul, ol, li, dl, dd, p, h1, h2, h3, h4, h5, h6, form, fieldset, .pr, .pc {
margin: 0;
padding: 0;
}
.bm_c {
background: white;
}
.bbda {
border-bottom: 1px dashed #CDCDCD;
}
.cl {
zoom: 1;
}
.xld dt {
padding: 8px 0 5px;
font-weight: 700;
}
.bm_c h2 a, .bm_c dt a {
padding-right: 10px;
color: #4A4E52;
}
.focus dt a {
color: #0060A6;
font-size: 12px;
}
.xi2, .xi2 a, .xi3 a {
color: #266CB5;
}
.xld dd {
margin-bottom: 8px;
}
.hm {
text-align: center;
}
.ptn {
padding-top: 5px!important;
}
a:hover, * a:hover {
color: #F60 !important;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
function setCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
} else {
var expires = "";
}
document.cookie = name + "=" + value + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1, c.length);
}
if (c.indexOf(nameEQ) == 0) {
return c.substring(nameEQ.length, c.length);
}
}
return null;
}
</script>
<script>
$(document).ready(function() {
if(getCookie("nofocus_8")==1){
$('#sitefocus').css('display','none');
}else{
$('#sitefocus').css('display',' ');}
});
</script>
</head><body>
<br><br>
此例子启用了cookie记录，在这一窗口中，只要没有关闭网页点击关闭产生的cookie一直存在，此时无论怎么刷新都不会出现。点击清除cookie后刷新网页可以让关闭的关闭的窗口显示。<br><br>
<a href="javascript:;" onclick="setCookie('nofocus_8',2,1*3600);$('#sitefocus').css('display',' ');" title="cookie"><font color=red>清除cookie</font></a>
<div class="focus" id="sitefocus" >
<div class="bm">
<div class="bm_h cl">
<a href="javascript:;" onclick="setCookie('nofocus_8',1,1*3600);$('#sitefocus').css('display','none');" class="y" title="关闭">关闭</a>
<h2>临时公告</h2>
</div>
<div class="bm_c">
<dl class="xld cl bbda">
<dt><a href="#" class="xi2" target="_blank">畅游论坛之新手指南</a></dt>
<dd>漫游论坛、新手必备之良品。请新注册会员仔细阅读本指南以尽快融入论坛。</dd>
</dl>
<p class="ptn hm"><a href="#" class="xi2" target="_blank">查看 »</a></p>
</div>
</div>
</div>
</body></html>
