网页右下角弹出信息框

最新推荐文章于 2021-03-02 07:57:06 发布

陆大先生

最新推荐文章于 2021-03-02 07:57:06 发布

阅读量1.4k

点赞数 1

文章标签： javascript dom

本文链接：https://blog.csdn.net/ming514671146/article/details/51584955

版权

<!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.οnlοad=function(){//加载
document.getElementById("winpop").style.height='0px';
setTimeout("tipspop()",800);//3秒后调用tipspop()这个函数
}
</script>
</head>
<body>
<div id="silu">
<button οnclick="tipspop()">3秒后会在右下角自动弹出窗口，如果没有弹出请点击这个按钮</button>
</div>
<div id="winpop">
<div class="title">您有新的短消息！<span class="close" οnclick="tipspop()">X</span></div>
<div class="con">1条未读信息</div>
</div>
</body>

</html>

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