cari

Rumah >hujung hadapan web >tutorial js >JavaScript实现右下角弹出提示框的方法

JavaScript实现右下角弹出提示框的方法

黄舟
黄舟asal
2017-12-05 14:26:286241semak imbas

在我们日常开发工作中，我们会经常遇到需要在页面的右下角弹出提示框或者广告的小功能，这样是为了更好的让用户体验，那么如何实现网页右下角弹出提示框呢？今天我们就带大家介绍下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(&#39;up&#39;)",2);
 }
 else{ 
 hide=setInterval("changeH(&#39;down&#39;)",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.onload=function(){
 var oclose=document.getElementById("close");
 var bt=document.getElementById("bt");
 document.getElementById(&#39;winpop&#39;).style.height=&#39;0px&#39;;
 setTimeout("tips_pop()",3000);
 oclose.onclick=function(){tips_pop()}
 bt.onclick=function(){tips_pop()}
}
</script>
<body>
<p id="silu">
 <button id="bt">3秒后会在右下角自动弹出窗口，如果没有弹出请点击这个按钮</button>
</p>
<p id="winpop">
 <p class="title">您有新的短消息！<span class="close" id="close">X</span></p>
 <p class="con">1条未读信息(</p>
</p>
</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实现右下角弹出提示框的方法，相信对此大家都有进一步的了解！希望对你的工作有所帮助！

相关推荐：

纯js的右下角弹窗实例代码

js 右下角弹窗效果代码(IE only)

js实现仿MSN带关闭功能的右下角弹窗代码

Atas ialah kandungan terperinci JavaScript实现右下角弹出提示框的方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JavaScript调试必备的5个debug技巧分享Artikel seterusnya：JavaScript中split函数由浅到深的使用介绍

Artikel berkaitan

Lihat lagi