js右下角弹出提示框示例代码

前端技术 2023/09/05 JavaScript

本文实例讲解了网页右下角弹出广告信息框实例代码，分享给大家供大家参考，具体内容如下

效果图：

具体代码：

<!DOCTYPE html>
<html>
<head>
<meta charset=\"gb2312\">
<title>网页右下角的信息框</title>
</head>
<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-decoration:underline;
 line-height:22px;
}
.close{
 position:absolute;
 right:4px;
 top:-1px;
 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\"; //隐藏DIV
 }
 }
}
window.onload=function(){
 var oclose=document.getElementById(\"close\");
 var bt=document.getElementById(\"bt\");
 document.getElementById(\'winpop\').style.height=\'0px\';
 setTimeout(\"tips_pop()\",3000);
 oclose.onclick=function(){tips_pop()}
 bt.onclick=function(){tips_pop()}
}
</script>
<body>
<div id=\"silu\">
 <button id=\"bt\">3秒后会在右下角自动弹出窗口，如果没有弹出请点击这个按钮</button>
</div>
<div id=\"winpop\">
 <div class=\"title\">您有新的短消息！<span class=\"close\" id=\"close\">X</span></div>
 <div class=\"con\">1条未读信息(</div>
</div>
</body>
</html>

以上代码实现了我们需要的功能，下面简单介绍一下实现过程。
实现原理:
原理非常的简单，下面分步做一下简单的介绍:
1.让窗口居于网页的右下角:
实现代码如下:

#winpop {
 width:200px;
 height:0px;
 position:absolute;
 right:0;
 bottom:0;
 border:1px solid #666;
 margin:0;
 padding:1px;
 overflow:hidden;
 display:none;
}

以上代码将windpop元素设置为绝对定位，尤其是将它的right和bottom属性值设置为0，这样就保证了它位于网页的右下角，同时也将它的高度设置为0px，也就是说在默认状态下是隐藏的。
2.如何显示和隐藏:
通过定时器函数setInterval()每隔指定时间调用一次changeH()函数，此函数可以根据传递的值不断的设置windpop的高度，这样就实现了此窗口平滑出现和消失的效果。原理大体如上，这里就不多介绍了。

以上就是右下角弹出提示框的实现代码，希望对大家的学习javascript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/14257

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案