<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<html xmlns=
"http://www.w3.org/1999/xhtml"
>
<head>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=gb2312"
/>
<title>右下角的弹窗</title>
<style type=
"text/css"
>
body { background:
#333333;}
#winpop {
width:200px; height:0px;
position:absolute; right:0; bottom:0;
border:1px solid
#999999; margin:0; padding:1px;
overflow:hidden; display:none; background:
#FFFFFF
}
#winpop .title {
width:100%; height:20px;
line-height:20px; background:
#FFCC00;
font-weight:bold; text-align:center;
font-size:12px;
}
#winpop .con {
width:100%; height:80px;
line-height:80px; font-weight:bold;
font-size:12px; color:
#FF0000;
text-decoration:underline; text-align:center
}
#silu {
font-size:13px; color:
#999999;
position:absolute; right:0;
text-align:right; text-decoration:underline;
line-height:22px;
}
.close {
position:absolute; right:4px; top:-1px;
color:
#FFFFFF; cursor:pointer
}
</style>
<script type=
"text/javascript"
>
function
tips_pop(){
var
MsgPop=document.getElementById(
"winpop"
);
var
popH=parseInt(MsgPop.style.height);
if
(popH==0){
MsgPop.style.display=
"block"
;
show=setInterval(
"changeH('up')"
,2);
}
else
{
hide=setInterval(
"changeH('down')"
,2);
}
}
function
changeH(str) {
var
MsgPop=document.getElementById(
"winpop"
);
var
popH=parseInt(MsgPop.style.height);
if
(str==
"up"
){
if
(popH<=100){
MsgPop.style.height=(popH+4).toString()+
"px"
;
}
else
{
clearInterval(show);
}
}
if
(str==
"down"
){
if
(popH>=4){
MsgPop.style.height=(popH-4).toString()+
"px"
;
}
else
{
clearInterval(hide);
MsgPop.style.display=
"none"
;
}
}
}
window.onload=
function
(){
document.getElementById(
'winpop'
).style.height=
'0px'
;
setTimeout(
"tips_pop()"
,800);
}
</script>
</head>
<body>
内容展示内容展示内容展示内容展示内容展示
内容展示内容展示内容展示内容展示内容展示
内容展示内容展示内容展示内容展示内容展示
<hr>
<div id=
"silu"
>
<button onclick=
"tips_pop()"
>测试按钮</button>
</div>
<div id=
"winpop"
>
<div class=
"title"
>您有新的消息
<span class=
"close"
onclick=
"tips_pop()"
>X</span></div>
<div class=
"con"
>未读信息(1)</div>
</div>
<div>http:
</body>
</html>