網頁右下方彈出提示框

pmw4 9年前發布 | 1K 次閱讀 JavaScript 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;



<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title></title>  
    <style type="text/css">  
        #winpop   
        {  
            width:200px; height:0px; position:absolute;   
            right:0; bottom:0px; border:1px solid #99999;  
            margin:0px; padding:1px; overflow:hidden; background:#fff; display:none;  
         }  
         div.title  
         {   
             width:100%; height:20px; line-height:20px; background:#290052;  
             font-weight:bold; text-align:center; font-size:12px; color:#fff;   
         }  
         div.content  
         {  
             width:100%; height:80px; line-height:80px; font-weight:bold; font-size:12px; color:#ff0000;  
             text-decoration:underline; text-align:center; border:1px solid #290052;  
         }  
         .close  
         {  
             position:absolute; right:4px; top:-1px; color:#fff; cursor:pointer;  
         }  
         #glide{background:yellow; border:1px solid blue; display:none;}  
    </style>  
    <script language="javascript" type="text/javascript">  
        var MsgPop;  
        var popH;  
        var oDiv;  
        var oDivW;  
        var oDivH;  
        window.onload = function () {  
            MsgPop = document.getElementById("winpop");  
            MsgPop.style.height = "0px";  

            tips_pop();  
            setTimeout("tips_pop()", 5000);  
        }  
        function tips_pop() {  
            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) {  
            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";  
                }  
            }  
        }  
    </script>  
</head>  
<body>  
    <div id="winpop">  
        <div class="title">  
            短消息<span class="close" onclick="tips_pop()">X</span>  
        </div>  
        <div class="content">未讀消息(5)</div>  
    </div>  
</body>  
</html>  </pre>
 本文由用戶 pmw4 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！