右下角弹出框

$(document).ready(function()
{    
    document.getElementById('winpop').style.height = '0px';
    setTimeout("tips_pop()", 800); //3秒后调用tips_pop()这个函数
});

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 <= 237) {
                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";  //隐藏DIV
            }
        }
}

 

页面html

<div id="winpop">
    <div class="title">
        <span class="close" onclick="tips_pop()">关闭</span></div>
    <div class="con"></div>
</div>    

 

样式

#winpop{width: 494px;height: 272px;position: absolute;right: 0;bottom: 0;border: 1px solid #666;margin: -1;padding: 1px;overflow: hidden;display: none;z-index: 10;filter: alpha(opacity=85);opacity: 0.85;}
#winpop .title{width: 100%;height: 15px;line-height: 15px;background: white;font-weight: bold;text-align: center;font-size: 12px;}
#winpop .con{width: 100%;height: 240px;font-weight: bold;font-size: 12px;color: #FF0000;text-align: center;background: url(../images/Bulletin.jpg) 0 0 no-repeat;}
#winpop .con .pp{height: 10px;line-height: 10px;}
.close{position: absolute;right: 4px;top: -1px;color: #000;cursor: pointer;}

 

转载于:https://www.cnblogs.com/dreamshallow/p/3653857.html