效果圖： 

頁面初始化時呼叫：

document.getElementById('winpop').style.height = '0px';//要初始化這個高度,雖然CSS裡已經初始化了
setTimeout("tips_pop()", 0);

訊息內容：

<div id="winpop">
<div class="title">
系統資訊<br>
<span class="closeright" onclick="tips_pop()">關閉</span>
</div>
<p> 1111111111111111111</p>
<p> 22222222222222222</p>
</div>

JS方法：

//彈出提示框
function tips_pop() {
var MsgPop = document.getElementById("winpop");//獲取視窗這個物件,即ID為winpop的物件
var popH = parseInt(MsgPop.style.height);//用parseInt將物件的高度轉化為數字,以方便下面比較

if (popH == 0) { //如果視窗的高度是0
MsgPop.style.display = "block";//那麼將隱藏的視窗顯示出來
show = setInterval("changeH('up')", 30);//開始以每0.030秒呼叫函式changeH("up"),即每0.030秒向上移動一次
} else { //否則
hide = setInterval("changeH('down')", 30);//開始以每0.030秒呼叫函式changeH("down"),即每0.030秒向下移動一次
}
}
//變化高度
function changeH(str) {
var MsgPop = document.getElementById("winpop");
var popH = parseInt(MsgPop.style.height);
if (str == "up") { //如果這個引數是UP
if (popH <= 200) { //如果轉化為數值的高度小於等於200、這裡調整視窗高度
MsgPop.style.height = (popH + 4).toString() + "px";//高度增加4個象素
} else {
clearInterval(show);//否則就取消這個函式呼叫,意思就是如果高度超過200象度了,就不再增長了
}
}
if (str == "down") {
if (popH >= 4) { //如果這個引數是down
MsgPop.style.height = (popH - 4).toString() + "px";//那麼視窗的高度減少4個象素
} else { //否則
clearInterval(hide); //否則就取消這個函式呼叫,意思就是如果高度小於4個象度的時候,就不再減了
MsgPop.style.display = "none"; //因為視窗有邊框,所以還是可以看見1~2象素沒縮排去,這時候就把DIV隱藏掉
}
}
}

CSS：

#winpop {
width: 350px;
height: 0px;
position: absolute;
right: 0;
bottom: 0;
border: 1px solid grey;
margin: 0;
padding: 1px;
overflow: hidden;
display: none;
background: #eff3f8
}

#winpop .title {
width: 100%;
height: 30px;
line-height: 200%;
background: #f36523;
font-weight: bold;
text-align: center;
font-size: 14px;
color: white
}

#winpop .con {
width: 100%;
height: 360px;
line-height: 80px;
font-weight: bold;
font-size: 12px;
color: #FF0000;
text-decoration: underline;
text-align: center
}

.closeright {
position: absolute;
right: 4px;
top: -1px;
color: #FFFFFF;
cursor: pointer;
}