javascript实现简单的页面右下角提示信息框


Posted in Javascript onJuly 31, 2015

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

notice.js

var time;
var delayTime;
$(function(){
  // 增加浮动DIV
  $('body').append("<div id='notice' onselectstart='return false'><span class='notice_title'> </span><span class='cbtn'>[关闭]</span><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>

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

Javascript 相关文章推荐
一个判断email合法性的函数[非正则]
Dec 09 Javascript
JavaScript 题型问答有答案参考
Feb 17 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
Jul 27 Javascript
jQuery代码优化之基本事件
Nov 01 Javascript
Js 获取Gridview选中行的内容操作步骤
Feb 05 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
Aug 03 Javascript
js实现本地时间同步功能
Aug 26 Javascript
如何以Angular的姿势打开Font-Awesome详解
Apr 22 Javascript
JavaScript DOM常用操作代码汇总
Jul 03 Javascript
Vue.js原理分析之nextTick实现详解
Sep 07 Javascript
解决antd Form 表单校验方法无响应的问题
Oct 27 Javascript
JavaScript实现快速排序的方法
Jul 31 #Javascript
javascript常用正则表达式汇总
Jul 31 #Javascript
轻量级网页遮罩层jQuery插件用法实例
Jul 31 #Javascript
js实时获取并显示当前时间的方法
Jul 31 #Javascript
Javascript实现的Map集合工具类完整实例
Jul 31 #Javascript
JS特效实现图片自动播放并可控的效果
Jul 31 #Javascript
javascript实现列表滚动的方法
Jul 30 #Javascript
You might like
PHP pathinfo()获得文件的路径、名称等信息说明
2011/09/13 PHP
PHP+javascript制作带提示的验证码源码分享
2014/05/28 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
extjs 学习笔记(二) Ext.Element类
2009/10/13 Javascript
Jquery 绑定时间实现代码
2011/05/03 Javascript
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
js计算任意值之间随机数的方法
2015/01/16 Javascript
使用jQueryMobile实现滑动翻页效果的方法
2015/02/04 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
Python 除法小技巧
2008/09/06 Python
Python实现自动发送邮件功能
2021/03/02 Python
Python多线程扫描端口代码示例
2018/02/09 Python
django1.11.1 models 数据库同步方法
2018/05/30 Python
python做接口测试的必要性
2019/11/20 Python
Pygame框架实现飞机大战
2020/08/07 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
我的大学生活职业生涯规划
2014/01/02 职场文书
《美丽的彩虹》教学反思
2014/02/25 职场文书
英文邀请函
2015/02/02 职场文书
综合办公室主任岗位职责
2015/04/01 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
2015年语文教学工作总结
2015/05/25 职场文书
学校运动会简讯
2015/07/20 职场文书
运动会报道稿大全
2015/07/23 职场文书
小学语文新课改心得体会
2016/01/22 职场文书
奖学金申请书(范文)
2019/08/14 职场文书
JS实现简单控制视频播放倍速的实例代码
2021/04/18 Javascript
python和Appium的移动端多设备自动化测试框架
2022/04/26 Python
本地搭建minio文件服务器(使用bat脚本启动)的方法
2022/07/15 Servers