js实现右下角消息提示功能

首先添加样式

#winpop {
  200px;
 height: 100px;
 position: absolute;
 right: 0;
 bottom: 0;
 border: 1px solid #666;
 margin: 0;
 padding: 1px;
 overflow: hidden;
 display: block;
}

#winpop .title {
  100%;
 height: 22px;
 line-height: 20px;
 background: #FFCC00;
 font-weight: bold;
 text-align: center;
 font-size: 12px;
}

#winpop .con {
  100%;
 height: 90px;
 line-height: 80px;
 font-weight: bold;
 font-size: 12px;
 color: #FF0000;
 text-decoration: underline;
 text-align: center
} 
#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
}

页面上添加div

<div id="winpop" style="display: none">
   <div class="title">
    您有新的短消息！
    <span class="close"
     onclick="javascript:document.getElementById('winpop').style.display='none'">X</span>
   </div>
   <div id="tipmsg" class="con">

   </div>
  </div>

添加js方法

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);
    setTimeout("tips_pop()",3000);
   }
  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";  //隐藏DIV
  }
 }
}

需要时调用tips_pop()方法 右下角就会弹出窗体