在我们日常开发工作中，我们会经常遇到需要在页面的右下角弹出提示框或者广告的小功能，这样是为了更好的让用户体验，那么如何实现网页右下角弹出提示框呢？今天我们就带大家介绍下JavaScript实现右下角弹出提示框的方法！

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

效果图：

具体代码：

网页右下角的信息框

#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

}

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"; //隐藏p

}

}

}

window.οnlοad=function(){

var oclose=document.getElementById("close");

var bt=document.getElementById("bt");

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

setTimeout("tips_pop()",3000);

oclose.οnclick=function(){tips_pop()}

bt.οnclick=function(){tips_pop()}

}

3秒后会在右下角自动弹出窗口，如果没有弹出请点击这个按钮

您有新的短消息！X

1条未读信息(

以上代码实现了我们需要的功能，下面简单介绍一下实现过程。

实现原理:

原理非常的简单，下面分步做一下简单的介绍:

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实现右下角弹出提示框的方法，相信对此大家都有进一步的了解！希望对你的工作有所帮助！

相关推荐：