<!DOCTYPE HTML> <head> <title>JS实现右下角弹窗</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <style type="text/css"> .win-pop { width: 200px; height: 0; position: absolute; right: 0; bottom: 0; border: 1px solid #999999; padding: 5px; overflow: hidden; font-weight: bold; display: none; background: #FFF; font-size: 12px; } .win-pop .title { width: 100%; height: 30px; line-height: 30px; background: #FFCC00; text-align: center; font-size: 14px; } .win-pop .con { width: 100%; height: 80px; color: #FF0000; text-decoration: underline; } .close { position: absolute; right: 5px; top: -3px; color: #FFF; 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> <div id="winPop" class="win-pop"> <div class="title">您有新的消息 <span class="close" onclick="tips_pop()">x</span> </div> <div class="con">信息内容框</div> </div> </body> </html>