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