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 相关文章推荐
js右键菜单效果代码
Jul 21 Javascript
jquery png 透明解决方案(推荐)
Aug 21 Javascript
jquery如何获取复选框的值
Dec 12 Javascript
Javascript selection的兼容性写法介绍
Dec 20 Javascript
JS操作CSS随机改变网页背景实现思路
Mar 10 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
Mar 18 Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 Javascript
看看“疫苗查询”小程序有温度的代码
Jul 31 Javascript
vue setInterval 定时器失效的解决方式
Jul 30 Javascript
jQuery编写QQ简易聊天框
Aug 27 jQuery
vue里使用create, mounted调用方法
Apr 26 Vue.js
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
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
php实现过滤UBB代码的类
2015/03/12 PHP
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
PHP中类型转换 ,常量,系统常量,魔术常量的详解
2017/10/26 PHP
php时间戳转换代码详解
2019/08/04 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
laravel数据库查询结果自动转数组修改实例
2021/02/27 PHP
JS类定义原型方法的两种实现的区别评论很多
2007/09/12 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
JS数字抽奖游戏实现方法
2015/05/04 Javascript
值得分享和收藏的Bootstrap学习教程
2016/05/12 Javascript
JS判断日期格式是否合法的简单实例
2016/07/11 Javascript
详解Node.Js如何处理post数据
2016/09/19 Javascript
简单学习vue指令directive
2016/11/03 Javascript
js实现五星评价功能
2017/03/08 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
webpack 3.X学习之多页面打包的方法
2018/09/04 Javascript
webpack4 升级迁移的实现
2018/09/12 Javascript
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
对TensorFlow的assign赋值用法详解
2018/07/30 Python
Python3 安装PyQt5及exe打包图文教程
2019/01/08 Python
python实现简单学生信息管理系统
2020/04/09 Python
python实现126邮箱发送邮件
2020/05/20 Python
比利时香水网上商店:NOTINO
2018/03/28 全球购物
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
村主任个人对照检查材料
2014/10/01 职场文书
高三英语教学计划
2015/01/23 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
浅谈pytorch中的dropout的概率p
2021/05/27 Python
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server
html原生table实现合并单元格以及合并表头的示例代码
2023/05/07 HTML / CSS