js右下角弹出提示框示例代码,javascript实现简单的页面右下角提示信息框

2.show — 设置标题,这个只能固定在当前页面的右下加,下面简单介绍一下实现过程,实现原理

由于之前找到一个开源的很好用,可以固定在浏览器的右下角;兼容性也很好;加上之后影响到应用的一个小功能点,决定重写一个;这个只能固定在当前页面的右下加,系统是上下结构满足需求,没在继续扩展;
两个函数:
1.lay — 设置提示框高宽(可选)
2.show — 设置标题,内容,和停留时间

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

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

效果图:

图片 1

图片 2

具体代码:

<!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">您有新的短消息!X</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程序设计有所帮助。

notice.js

您可能感兴趣的文章:

  • js实现右下角窗口弹出窗口效果
  • js右下角弹出窗口,点击可关闭效果
  • Js右下角视频广告代码(百度视窗)
  • JS模仿MSN右下角弹出提示框代码
  • 兼容性非常好的js右下角与漂浮广告代码
  • js右下角与漂浮广告代码(兼容多浏览器)
  • 页面右下角弹出提示框示例代码js版
  • js网页右下角提示框实例
  • js实现右下角提示框的方法

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

var time;
var delayTime;
$(function(){
  // 增加浮动DIV
  $('body').append("<div id='notice' onselectstart='return false'> [关闭]<div class='notice_content'></div></div>");

  // 更改样式
  $('#notice').css({right:"0",bottom:"0",cursor:"default",position:"fixed","background-color":"#CFDEF4",color:"#1F336B","z-index":"999",border:"1px #1F336B solid",margin:"2px",padding:"10px","font-weight":"bold","line-height":"25px",display:"none"});
  $('#notice .cbtn').css({color:"#FF0000",cursor:"pointer","padding-right":"5px",float:"right",position:"relative"});
  $('#notice .notice_content').css({margin:"3px","font-weight":"normal",border:"1px #B9C9EF solid","line-height":"20px","margin-bottom":"10px",padding:"10px"});

  /* 绑定事件*/
  $('#notice').hover(
    function(){
      $(this).stop(true,true).slideDown();
      clearTimeout(time);
    },
    function(){
      time = setTimeout('_notice()',delayTime);
    }
  );

  //绑定关闭事件
  $('.cbtn').bind('click',function(){
    $('#notice').slideUp('fast');
    clearTimeout(time);
  });
});
$.extend({
  lay:function(_width,_height){
    $('#notice').css({width:_width,height:_height});
  },
  show:function(_title,_msg,_time){
     delayTime = _time;
     $('.notice_title').html(_title);
     $('.notice_content').html(_msg);
     $('#notice').slideDown(2000);
     time = setTimeout('_notice()',delayTime);
  },
});
function _notice(){
  $('#notice').slideUp(2000);
}

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 <head>
  <title>index.html</title>

  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/>
  <meta http-equiv="description" content="this is my page"/>
  <meta http-equiv="content-type" content="text/html; charset=GBK"/>

  <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

 </head>

 <body onload='initPage();'>
 </body>
 <script type="text/javascript">
  function initPage(){
    var returnMsg = "<p>信息1 jquery-1.7.2.min.js</p><p>信息2 notice.js</p><p>信息3</p>";
    $.show('提示信息',returnMsg,10000);
  }
 </script>
 <script src="jquery-1.7.2.min.js" type="text/javascript" ></script>
 <script src="notice.js" type="text/javascript" ></script>
</html>

以上所述就是本文的全部内容了,希望大家能够喜欢。

您可能感兴趣的文章:

  • js右下角弹出窗口,点击可关闭效果
  • javascript qq右下角滑出窗口
    sheyMsg
  • Js右下角视频广告代码(百度视窗)
  • JS模仿MSN右下角弹出提示框代码
  • 兼容性非常好的js右下角与漂浮广告代码
  • js右下角与漂浮广告代码(兼容多浏览器)
  • javascript右下角弹层及自动隐藏(自己编写)
  • js实现右下角提示框的方法
  • javascript实现博客园页面右下角返回顶部按钮
  • javascript实现的右下角弹窗实例