做一个JQuery右下角消息框弹窗

#newnotice {
position:absolute;
display:none;
width:250px;
border:solid #9BDF70 1px;
background-color: #F0FBEB
}
#newnotice p {
font-size:12px;
margin:1px;
padding:0px 2px 0px 5px;
background-color:#C2ECA7;
color:#666666;
height:20px;
line-height:20px;
}
#newnotice p .title {
float:left;
}
#newnotice p #bts {
display:block;
float:right;
width:48px;
height:15px;
}
#newnotice p #bts .button {
display:block;
float:left;
width:15px;
height:15px;
line-height:15px;
cursor:pointer;
}
#newnotice p #bts #tomin {
background:url(../../images/201202/btns.gif) no-repeat 0px 3px; height:15px; width:15px;
/* background-position:center; */
}
#newnotice p #bts #tomax {
background:url(../../images/201202/btns.gif) no-repeat -17px 2px; height:15px; width:15px;
/* background-position:center; */
}
#newnotice p #bts #toclose {
background-image:url(http://www.nowamagic.net);
}
#newnotice div {
font-size:12px;
margin:1px;
padding:0px 5px 0px 5px;
background-color:#FFFFFF;
color:#999999;
height:125px;
line-height:20px;
}
#noticecon ol li
{
overflow:hidden;
height:22px;
line-height:22px;
}

右下角弹窗在互联网上使用得非常普遍，虽然这种方式会很大地影响到用户体验，但是领导有这个要求，我们还是得做。下面是介绍一个刚写的弹窗例子，做得还算凑合吧。scroll : 滚动时候保持在页面右侧底部，resize: 浏览器变化时候保持在页面右侧底部。

效果演示

如右下角效果所示。

Jquery Code：

<script type="text/javascript">
$(function(){
$(window).load(function(){
$("div[id=newnotice]").css({"right":"0px","bottom":"1px"});
$("div[id=newnotice]").slideDown("slow");
}).scroll(function(){
$("div[id=newnotice]").css({"bottom":"0px"});
$("div[id=newnotice]").css({"right":"0px","bottom":"1px"});
}).resize(function(){
$("div[id=newnotice]").css({"bottom":""});
$("div[id=newnotice]").css({"right":"0px","bottom":"1px"});
});
$("label[id=tomin]").click(function(){
$("div[id=noticecon]","div[id=newnotice]").slideUp();
});
$("label[id=tomax]").click(function(){
$("div[id=noticecon]","div[id=newnotice]").slideDown();
});
$("label[id=toclose]").click(function(){
$("div[id=newnotice]").hide();
});
/**
$.get("http://www.nowamagic.net/cgi/test.xml", function(data){
$(data).find('channel').find('item').each(function(index, ele){
var titles = $(ele).find('title').text();
var links = $(ele).find('link').text();
$("#noticecon").find('ol').append('<li><a href="'+links+'">'+titles+'</a></li>');
})
});
**/
});
</script>

HTML Code：

<div id="newnotice">
<p>
<span class="title">最热新闻</span>
<span id="bts">
<label class="button" id="tomin" title="最小化">_</label>
<label class="button" id="tomax" title="最大化">口</label>
<label class="button" id="toclose" title="关闭">×</label>
</span>
</p>
<div id="noticecon">
<ol>
</ol>
</div>
</div>

最热新闻

×