您的位置：首页 > Web前端 > JavaScript

网页右下角弹出信息框

2016-06-04 16:29 281 查看

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title>网页右下角弹信息框</title>

<style type="text/css">

#winpop

{

width: 200px;

height: 0px;

position: absolute;

right: 0;

bottom: 0;

border: 1px solid #666;

margin: 0;

padding: 1px;

overflow: hidden;

display: none;

}

#winpop .title

{

width: 100%;

height: 22px;

line-height: 20px;

background: #FFCC00;

font-weight: bold;

text-align: center;

font-size: 12px;

}

#winpop .con

{

width: 100%;

height: 90px;

line-height: 80px;

font-weight: bold;

font-size: 12px;

color: #FF0000;

text-decoration: underline;

text-align: center;

}

#silu

{

font-size: 12px;

color: #666;

position: absolute;

right: 0;

text-align: right;

text-decoration: underline;

line-height: 22px;

}

.close

{

position: absolute;

right: 4px;

top: -1px;

color: #FFF;

cursor: pointer;

}

</style>

<script>

function tipspop(){

var a = document.getElementById("winpop");

var poph = parseInt(a.style.height);//将对象的高度转化为数字

if(poph==0){

a.style.display="block";//显示隐藏的窗口

show=setInterval("changeH('up')",2);

}else{

hide=setInterval("changeH('down')",2);

}

}

function changeH(str){

var a = document.getElementById("winpop");

var poph = parseInt(a.style.height);//将对象的高度转化为数字

if(str=="up"){

if(poph<=100){

a.style.height=(poph +4).toString()+"px";

}else{

clearInterval(show);

}

}

if(str=="down"){

if(poph>=4){

a.style.height=(poph-4).toString()+"px";

}else{

clearInterval(hide);

a.style.display="none";//隐藏DIV

}

}

}

window.onload=function(){//加载

document.getElementById("winpop").style.height='0px';

setTimeout("tipspop()",800);//3秒后调用tipspop()这个函数

}

</script>

</head>

<body>

<div id="silu">

<button onclick="tipspop()">3秒后会在右下角自动弹出窗口，如果没有弹出请点击这个按钮</button>

</div>

<div id="winpop">

<div class="title">您有新的短消息！<span class="close" onclick="tipspop()">X</span></div>

<div class="con">1条未读信息</div>

</div>

</body>
</html>

你们懂的有些网站要弹出一些有内涵的东西

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript dom

相关文章推荐

新的分享

章节导航