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

 我来答

3个回答

#热议# 空调使用不当可能引发哪些疾病？

吉祥二进制

高粉答主

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

吉祥二进制

采纳数：33926 获赞数：84565

向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>

已赞过 已踩过<

评论收起

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

知道大有可为答主

回答量：2803

采纳率：82%

帮助的人：608万

我也去答题访问个人页

关注

展开全部

代码如下：
<!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>

已赞过 已踩过<

评论收起

元小翠044
2016-04-22 · TA获得超过8.2万个赞

知道大有可为答主

回答量：2.4万

采纳率：89%

帮助的人：3085万

我也去答题访问个人页

关注

展开全部

这里有一个弹出框效果能自定义定位并随屏滚动而不抖动还可以设置居中和锁屏里面有教程和源码

已赞过 已踩过<

评论收起

1条折叠回答

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

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

其他类似问题

为你推荐：