1.第一种：转载：
有时在页面加载的时候，需要在页面的右下角弹出一个小的提示框，显示一些提示信息给用户，通过使用jQuery的message插件，可以很方便的实现这个效果，在使用之前先介绍一下message插件中的方法的使用。
1.$.messager.lays(width, height);
该方法主要用来定义弹出窗口的宽度和高度。
2.$.messager.anim(type,speed);
该方法主要定义窗口以什么样的方式和速度呈现。
$.messager.anim("fade",1000); //以fadeIn的动画方式显示
$.messager.anim("show",1000); //以show的动画方式显示
3.$.messager.show(title,text,time);
该方法主要定义窗口显示的内容，以及窗口显示多长时间后进行隐藏。
如果使用默认的标题，则将title设置为0，另外title和text还可以设置为html内容进行显示。如果希望用户点击弹窗的关闭按钮才关闭消息框，可将time设置为0。
$.messager.show(0, "这是一个提示框",5000);
$.messager.show("<font color='red'>提示信息</font>","<a href='http://www.cnblogs.com'>博客园欢迎你</a>",3000);
在明白了message插件中每个方法的作用后，使用起来就很简单了，具体操作如下：
1.在页面引入jquery.js和jquery.messager.js文件。
2.在页面加载的时候调用message插件中的函数，设置窗口的大小，显示效果，以及显示内容。
$(function () {
$.messager.lays(200, 200);
$.messager.anim('fade', 1000);
$.messager.show("提示信息", "<a href='http://www.cnblogs.com'>博客园欢迎你</a>",5000);
});
$.messager.lays(200, 200);
$.messager.anim('fade', 1000);
$.messager.show("提示信息", "<a href='http://www.cnblogs.com'>博客园欢迎你</a>",5000);
});
3.最后显示的效果如下图。
下载js：
View Code
1 (function(){ 2 3 var ua=navigator.userAgent.toLowerCase(); 4 5 var is=(ua.match(/\b(chrome|opera|safari|msie|firefox)\b/) || ['','mozilla'])[1]; 6 7 var r='(?:'+is+'|version)[\\/: ]([\\d.]+)'; 8 9 var v=(ua.match(new RegExp(r)) ||[])[1]; 10 11 jQuery.browser.is=is; 12 13 jQuery.browser.ver=v; 14 15 jQuery.browser[is]=true; 16 17 })(); 18 19 (function (jQuery){ 20 21 /* 22 23 * jQuery Plugin - Messager 24 25 * Author: corrie Mail: corrie@sina.com Homepage: www.corrie.net.cn 26 27 * Copyright (c) 2008 corrie.net.cn 28 29 * @license http://www.gnu.org/licenses/gpl.html [GNU General Public License] 30 31 * 32 33 * $Date: 2008-12-26 34 35 * $Vesion: 1.4 36 37 @ how to use and example: Please Open demo.html 38 39 */ 40 41 this.version = '@1.3'; 42 43 this.layer = {'width' : 200, 'height': 100}; 44 45 this.title = '信息提示'; 46 47 this.time = 4000; 48 49 this.anims = {'type' : 'slide', 'speed' : 600}; 50 this.timer1 = null; 51 52 53 54 this.inits = function(title, text){ 55 56 if($("#message").is("div")){ return; } 57 var topHeight = document.documentElement.scrollTop + document.documentElement.clientHeight - this.layer.height-2; 58 $(document.body).prepend('<div id="message" style="border:#b9c9ef 1px solid;z-index:100;width:'+this.layer.width+'px;height:'+this.layer.height+'px;position:absolute; display:none;background:#cfdef4; bottom:0; top:'+ topHeight +'px;right:0; overflow:hidden;"><div style="border:1px solid #fff;border-bottom:none;width:100%;height:25px;font-size:12px;overflow:hidden;color:#1f336b;"><span id="message_close" style="float:right;padding:5px 0 5px 0;width:16px;line-height:auto;color:red;font-size:12px;font-weight:bold;text-align:center;cursor:pointer;overflow:hidden;">×</span><div style="padding:5px 0 5px 5px;width:100px;line-height:18px;text-align:left;overflow:hidden;">'+title+'</div><div style="clear:both;"></div></div> <div style="padding-bottom:5px;border:1px solid #fff;border-top:none;width:100%;height:auto;font-size:12px;"><div id="message_content" style="margin:0 5px 0 5px;border:#b9c9ef 1px solid;padding:10px 0 10px 5px;font-size:12px;width:'+(this.layer.width-17)+'px;height:'+(this.layer.height-50)+'px;color:#1f336b;text-align:left;overflow:hidden;">'+text+'</div></div></div>'); 59 60 61 62 $("#message_close").click(function(){ 63 64 setTimeout('this.close()', 1); 65 66 }); 67 $("#message").hover(function(){ 68 clearTimeout(timer1); 69 timer1 = null; 70 },function(){ 71 timer1 = setTimeout('this.close()', time); 72 //alert(timer1); 73 }); 74 75 }; 76 77 this.show = function(title, text, time){ 78 79 if($("#message").is("div")){ return; } 80 81 if(title==0 || !title)title = this.title; 82 83 this.inits(title, text); 84 85 if(time>=0)this.time = time; 86 87 switch(this.anims.type){ 88 89 case 'slide':$("#message").slideDown(this.anims.speed);break; 90 91 case 'fade':$("#message").fadeIn(this.anims.speed);break; 92 93 case 'show':$("#message").show(this.anims.speed);break; 94 95 default:$("#message").slideDown(this.anims.speed);break; 96 97 } 98 99 if($.browser.is=='chrome'){ 100 101 setTimeout(function(){ 102 103 $("#message").remove(); 104 105 this.inits(title, text); 106 107 $("#message").css("display","block"); 108 109 },this.anims.speed-(this.anims.speed/5)); 110 111 } 112 113 //$("#message").slideDown('slow'); 114 115 this.rmmessage(this.time); 116 117 }; 118 119 this.lays = function(width, height){ 120 121 if($("#message").is("div")){ return; } 122 123 if(width!=0 && width)this.layer.width = width; 124 125 if(height!=0 && height)this.layer.height = height; 126 127 } 128 129 this.anim = function(type,speed){ 130 131 if($("#message").is("div")){ return; } 132 133 if(type!=0 && type)this.anims.type = type; 134 135 if(speed!=0 && speed){ 136 137 switch(speed){ 138 139 case 'slow' : ;break; 140 141 case 'fast' : this.anims.speed = 200; break; 142 143 case 'normal' : this.anims.speed = 400; break; 144 145 default: 146 147 this.anims.speed = speed; 148 149 } 150 151 } 152 153 } 154 155 this.rmmessage = function(time){ 156 157 if(time>0){ 158 159 timer1 = setTimeout('this.close()', time); 160 161 //setTimeout('$("#message").remove()', time+1000); 162 163 } 164 165 }; 166 this.close = function(){ 167 switch(this.anims.type){ 168 case 'slide':$("#message").slideUp(this.anims.speed);break; 169 case 'fade':$("#message").fadeOut(this.anims.speed);break; 170 case 'show':$("#message").hide(this.anims.speed);break; 171 default:$("#message").slideUp(this.anims.speed);break; 172 }; 173 setTimeout('$("#message").remove();', this.anims.speed); 174 this.original(); 175 } 176 177 this.original = function(){ 178 179 this.layer = {'width' : 200, 'height': 100}; 180 181 this.title = '信息提示'; 182 183 this.time = 4000; 184 185 this.anims = {'type' : 'slide', 'speed' : 600}; 186 187 }; 188 189 jQuery.messager = this; 190 191 return jQuery; 192 193 })(jQuery); 194 195 $(window).scroll( function() { 196 var topHeight = document.documentElement.scrollTop + document.documentElement.clientHeight - this.layer.height-2; 197 $("#message").css("top",topHeight+"px"); 198 });
2.第二种：
CSS：
<style type="text/css">
#tip
{
position: absolute;
right: 0px;
bottom: 0px;
height: 0px;
width: 180px;
border: 1px solid #CCCCCC;
background-color: #eeeeee;
padding: 1px;
overflow: hidden;
display: none;
font-size: 12px;
z-index: 10;
margin: 0px;
}
#tip p
{
padding: 10px;
}
#tip h1, #detail h1
{
margin-top:0px;
font-size: 14px;
height: 25px;
line-height: 25px;
background-color: #0066CC;
color: #FFFFFF;
padding: 0px 3px 0px 3px;
}
#tip h1 a, #detail h1 a
{
float: right;
text-decoration: none;
color: #FFFFFF;
}
</style>
View Code
1 2 2.js 3 var handle; 4 function start(count)//参数可由ajax传回来用 5 { 6 var divTip = document.createElement("div"); 7 divTip.id = "tip"; 8 divTip.innerHTML = "<h1><a href='javascript:void(0)' οnclick='start()'>×</a>您有1条新消息</h1><p><a href='javascript:void(0)' οnclick='showwin()'>点击这里查看详细</a></p>"; 9 divTip.style.height = '0px'; 10 divTip.style.bottom = '0px'; 11 divTip.style.position = 'fixed'; 12 document.body.appendChild(divTip); 13 14 var obj = document.getElementById("tip"); 15 if (parseInt(obj.style.height) == 0) { 16 obj.style.display = "block"; 17 handle = setInterval("changeH('up')", 20); //调用该方法 参数为循环调用的时间 18 } else { 19 handle = setInterval("changeH('down')", 20) 20 } 21 } 22 23 function changeH(str)//逐步改变窗体的高一次递增 或 递减8px 24 { 25 var obj = document.all ? document.all["tip"] : document.getElementById("tip"); 26 if (str == "up") { 27 if (parseInt(obj.style.height) > 100) 28 clearInterval(handle); 29 else 30 obj.style.height = (parseInt(obj.style.height) + 8).toString() + "px"; 31 } 32 if (str == "down") { 33 if (parseInt(obj.style.height) < 8) { 34 clearInterval(handle); 35 obj.style.display = "none"; 36 } 37 else { 38 obj.style.height = (parseInt(obj.style.height) - 8).toString() + "px"; 39 } 40 } 41 } 42 function hide() { 43 var obj = document.getElementById("tip"); 44 if (parseInt(obj.style.height) > 0) { 45 handle = setInterval("changeH('down')", 100) 46 } 47 } 48 49 </head> 50 <body οnlοad="start()"> 51 </body> 52 若存在两个界面，则用cookie保存状态，防止下一个页面再弹出，设置时间与统一登录有效时间相同，用户注销时，删除cookie。
2069
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
