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

如题所述

举报该问题

推荐答案 2016-04-22

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

温馨提示：答案为网友推荐，仅供参考

当前网址：http://66.wendadaohang.com/zd/UDvxsp9D2Dv9ns2Dsxv.html

其他回答

第1个回答 2016-04-22

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

第2个回答 2016-04-22

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

相似回答

大家正在搜