Welcome 微信登录

首页 / 脚本样式 / JavaScript / javascript实现简单的页面右下角提示信息框

由于之前找到一个开源的很好用,可以固定在浏览器的右下角;兼容性也很好;加上之后影响到应用的一个小功能点,决定重写一个;这个只能固定在当前页面的右下加,系统是上下结构满足需求,没在继续扩展;
两个函数:
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>
以上所述就是本文的全部内容了,希望大家能够喜欢。