JS 实现右下角弹窗

时间 2019-12-11 标签实现右下
<!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>