JavaScript怎么实现网页右下角弹出窗口代码

 我来答

3个回答

#合辑# 面试问优缺点怎么回答最加分？

吉祥二进制

高粉答主

2016-04-22 · 科技改变生活，生活改变科技。

吉祥二进制

采纳数：33926 获赞数：84577

向TA提问私信TA

关注

展开全部

 
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript实现网页右下角弹出窗口代码</title>
</head>
<style type="text/css">
#winpop { width:200px; height:0px;position:absolute; right:0; bottom:0; border:1px solid #666; margin:0;padding:1px; overflow:hidden; display:none;}
#winpop .title { width:100%; height:22px;line-height:20px; background:#FFCC00; font-weight:bold; text-align:center;font-size:12px;}
#winpop .con { width:100%; height:90px;line-height:80px; font-weight:bold; font-size:12px; color:#FF0000;text-decoration:underline; text-align:center} /* http://www.webdm.cn */
#silu { font-size:12px; color:#666;position:absolute; right:0; text-align:right; text-decoration:underline;line-height:22px;}
.close { position:absolute; right:4px;top:-1px; color:#FFF; cursor:pointer}
</style>
<scripttype="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) {
 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"; //隐藏DIV
  }
 }
}
window.onload=function(){//加载
document.getElementById('winpop').style.height='0px';
setTimeout("tips_pop()",800);//3秒后调用tips_pop()这个函数
}
</script>
<body>
<div id="silu">
<buttononclick="tips_pop()">3秒后会在右下角自动弹出窗口，如果没有弹出请点击这个按钮</button>
</div>
<div id="winpop">
 <div>您有新的短消息！<spanclass="close"onclick="tips_pop()">X</span></div>
   <div>1条<ahref="http://www.luenuo.com">经典语录</a>(</div>
</div>
</body>
</html>

已赞过 已踩过<

评论收起

武汉市江夏区沐仙网络服..

广告2024-12-11

网站建设-就找网润，网站建设多年，专业网站建设公司，网站制作经验，网润网站建设，专业网站建设，网站建设，网站设计，网站制作，网站开发，网站定制，网站外包

qianhu.wejianzhan.com

夜独行孤单
2016-04-22 · TA获得超过3460个赞

知道大有可为答主

回答量：2803

采纳率：82%

帮助的人：633万

我也去答题访问个人页

关注

展开全部

代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//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=utf-8" />
<title>JavaScript实现网页右下角弹出窗口代码</title>
</head>
<style type="text/css">
#winpop { width:200px; height:0px;position:absolute; right:0; bottom:0; border:1px solid #666; margin:0;padding:1px; overflow:hidden; display:none;}
#winpop .title { width:100%; height:22px;line-height:20px; background:#FFCC00; font-weight:bold; text-align:center;font-size:12px;}
#winpop .con { width:100%; height:90px;line-height:80px; font-weight:bold; font-size:12px; color:#FF0000;text-decoration:underline; text-align:center} /* http://www.webdm.cn */
#silu { font-size:12px; color:#666;position:absolute; right:0; text-align:right; text-decoration:underline;line-height:22px;}
.close { position:absolute; right:4px;top:-1px; color:#FFF; cursor:pointer}
</style>
<scripttype="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) {
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"; //隐藏DIV
}
}
}
window.onload=function(){//加载
document.getElementById('winpop').style.height='0px';
setTimeout("tips_pop()",800);//3秒后调用tips_pop()这个函数
}
</script>
<body>
<div id="silu">
<buttononclick="tips_pop()">3秒后会在右下角自动弹出窗口，如果没有弹出请点击这个按钮</button>
</div>
<div id="winpop">
<div>您有新的短消息！<spanclass="close"onclick="tips_pop()">X</span></div>
<div>1条<ahref="http://www.luenuo.com">经典语录</a>(</div>
</div>
</body>
</html>