| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
jssjo
10年前发布

JS实现右下角的弹窗

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  <title>右下角的弹窗</title>  <style type="text/css">  body { background:#333333;}  #winpop { width:200px; height:0px; position:absolute; right:0; bottom:0; border:1px solid #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>  <script type="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) {  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";    }  }  }  window.onload=function(){     document.getElementById('winpop').style.height='0px';  setTimeout("tips_pop()",800);     }  </script>  </head>      <body>  内容展示内容展示内容展示内容展示内容展示内容展示内容展示内容展示内容展示内容展示内容展示内容展示内容展示内容展示内容展示      <hr>  <div id="silu">  <button onclick="tips_pop()">测试按钮</button>  </div>  <div id="winpop">  <div class="title">您有新的消息<span class="close" onclick="tips_pop()">X</span></div>  <div class="con">未读信息(1)</div>  </div>  <div><A href="http://www.open-open.com/">http://www.open-open.com/</A></div>  </body>  </html>