1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8" />
  5     <title></title>
  6     <style>
  7         #winpop {
  8             width: 200px;
  9             height: 0px;
 10             position: absolute;
 11             right: 0;
 12             bottom: 0;
 13             border: 1px solid #666;
 14             margin: 0;
 15             padding: 1px;
 16             overflow: hidden;
 17             display: none;
 18         }
 19 
 20             #winpop .title {
 21                 width: 100%;
 22                 height: 22px;
 23                 line-height: 20px;
 24                 background: #FFCC00;
 25                 font-weight: bold;
 26                 text-align: center;
 27                 font-size: 12px;
 28             }
 29 
 30             #winpop .con {
 31                 width: 100%;
 32                 height: 90px;
 33                 line-height: 80px;
 34                 font-weight: bold;
 35                 font-size: 12px;
 36                 color: #FF0000;
 37                 text-decoration: underline;
 38                 text-align: center
 39             }
 40 
 41         #silu {
 42             font-size: 12px;
 43             color: #666;
 44             position: absolute;
 45             right: 0;
 46             text-decoration: underline;
 47             line-height: 22px;
 48         }
 49 
 50         .close {
 51             position: absolute;
 52             right: 4px;
 53             top: -1px;
 54             color: #FFF;
 55             cursor: pointer
 56         }
 57         #winpop {
 58             width: 200px;
 59             height: 0px;
 60             position: absolute;
 61             right: 0;
 62             bottom: 0;
 63             border: 1px solid #666;
 64             margin: 0;
 65             padding: 1px;
 66             overflow: hidden;
 67             display: none;
 68         }
 69     </style>
 70     <script type="text/javascript">
 71         function tips_pop() {
 72             var MsgPop = document.getElementById("winpop");
 73             var popH = parseInt(MsgPop.style.height);//将对象的高度转化为数字
 74             if (popH == 0) {
 75                 MsgPop.style.display = "block";//显示隐藏的窗口
 76                 show = setInterval("changeH('up')", 2);
 77             }
 78             else {
 79                 hide = setInterval("changeH('down')", 2);
 80             }
 81         }
 82         function changeH(str) {
 83             var MsgPop = document.getElementById("winpop");
 84             var popH = parseInt(MsgPop.style.height);
 85             if (str == "up") {
 86                 if (popH <= 100) {
 87                     MsgPop.style.height = (popH + 4).toString() + "px";
 88                 }
 89                 else {
 90                     clearInterval(show);
 91                 }
 92             }
 93             if (str == "down") {
 94                 if (popH >= 4) {
 95                     MsgPop.style.height = (popH - 4).toString() + "px";
 96                 }
 97                 else {
 98                     clearInterval(hide);
 99                     MsgPop.style.display = "none"; //隐藏DIV
100                 }
101             }
102         }
103         window.onload = function () {
104             var oclose = document.getElementById("close");
105             var bt = document.getElementById("bt");
106             document.getElementById('winpop').style.height = '0px';
107             setTimeout("tips_pop()", 3000);
108             oclose.onclick = function () { tips_pop() }
109             bt.onclick = function () { tips_pop() }
110         }
111         function LoadOpening() {
112             alert("此位置，打开弹框，可以浏览");
113         }
114     </script>
115 </head>
116 <body>
117     <div>整理：借鉴：右下角弹框：知识：JS</div>
118     <div id="silu">
119         <button id="bt">3秒后会在右下角自动弹出窗口，如果没有弹出请点击这个按钮</button>
120     </div>
121     <div id="winpop">
122         <div class="title">您有新的短消息！<span class="close" id="close">X</span></div>
123         <div class="con"><a href="#" id="Opening"  class="con" onclick="LoadOpening()">1条未读信息(）</a></div>
124     </div>
125     <div>
126         <p style="width:300px;height:200px;">
127             说明：以上代码将windpop元素设置为绝对定位，尤其是将它的right和bottom属性值设置为0，这样就保证了它位于网页的右下角，同时也将它的高度设置为0px，也就是说在默认状态下是隐藏的。
128         </p>
129     </div>
130 </body>
131 </html>