JS 实现右下角弹窗

Posted minoz

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS 实现右下角弹窗相关的知识，希望对你有一定的参考价值。

<!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>

 

以上是关于JS 实现右下角弹窗的主要内容，如果未能解决你的问题，请参考以下文章

JS 弹窗到右下角

原生JS实现各种经典网页特效——Banner图滚动选项卡切换广告弹窗等

WPF 右下角弹窗的简单实现

求一段 广告固定在网页右下角的代码（CSS或JS都行），谢谢!!

websocket业务代码

Winform中实现右下角Popuo弹窗提醒效果(附代码下载)