html 右下角弹窗,javascript实现的右下角弹窗实例

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

右下角的弹窗

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

}

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.οnlοad=function(){

document.getElementById('winpop').style.height='0px';

setTimeout("tips_pop()",800);

}

内容展示内容展示内容展示内容展示内容展示

内容展示内容展示内容展示内容展示内容展示

内容展示内容展示内容展示内容展示内容展示

---

测试按钮

您有新的消息

X

未读信息(1)

https://www.jb51.net/