javascript实现的右下角弹窗实例
本文实例讲述了javascript实现的右下角弹窗的方法。分享给大家供大家参考。具体如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>右下角的弹窗</title>
<styletype="text/css">
body{background:#333333;}
#winpop{
width:200px;height:0px;
position:absolute;right:0;bottom:0;
border:1pxsolid#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>
<scripttype="text/javascript">
functiontips_pop(){
varMsgPop=document.getElementById("winpop");
varpopH=parseInt(MsgPop.style.height);
if(popH==0){
MsgPop.style.display="block";
show=setInterval("changeH('up')",2);
}
else{
hide=setInterval("changeH('down')",2);
}
}
functionchangeH(str){
varMsgPop=document.getElementById("winpop");
varpopH=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>
<divid="silu">
<buttononclick="tips_pop()">测试按钮</button>
</div>
<divid="winpop">
<divclass="title">您有新的消息
<spanclass="close"onclick="tips_pop()">X</span></div>
<divclass="con">未读信息(1)</div>
</div>
<div>https://www.nhooo.com/</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。