系统首页右下角弹框

效果图： 

 

页面初始化时调用：

document.getElementById('winpop').style.height = '0px';//要初始化这个高度,虽然CSS里已经初始化了
setTimeout("tips_pop()", 0);

消息内容：

<div id="winpop">
<div class="title">
系统信息<br>
<span class="closeright" οnclick="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;
}

 

转载于:https://www.cnblogs.com/nayilvyangguang/p/10033865.html