Webページ右下のポップアップ・ボックス
3426 ワード
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#winpop
{
width:200px; height:0px; position:absolute;
right:0; bottom:0px; border:1px solid #99999;
margin:0px; padding:1px; overflow:hidden; background:#fff; display:none;
}
div.title
{
width:100%; height:20px; line-height:20px; background:#290052;
font-weight:bold; text-align:center; font-size:12px; color:#fff;
}
div.content
{
width:100%; height:80px; line-height:80px; font-weight:bold; font-size:12px; color:#ff0000;
text-decoration:underline; text-align:center; border:1px solid #290052;
}
.close
{
position:absolute; right:4px; top:-1px; color:#fff; cursor:pointer;
}
#glide{background:yellow; border:1px solid blue; display:none;}
</style>
<script language="javascript" type="text/javascript">
var MsgPop;
var popH;
var oDiv;
var oDivW;
var oDivH;
window.onload = function () {
MsgPop = document.getElementById("winpop");
MsgPop.style.height = "0px";
tips_pop();
setTimeout("tips_pop()", 5000);
}
function tips_pop() {
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) {
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";
}
}
}
</script>
</head>
<body>
<div id="winpop">
<div class="title">
<span class="close" onclick="tips_pop()">X</span>
</div>
<div class="content"> (3)</div>
</div>
</body>
</html>