系统首页右下角弹框

效果图： 



 

页面初始化时调用：

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 {
 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 {
 100%;
height: 30px;
line-height: 200%;
background: #f36523;
font-weight: bold;
text-align: center;
font-size: 14px;
color: white
}

#winpop .con {
 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;
}