<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery-1.7.1.js"></script> <script type="text/javascript" src="jquery.messager.js"></script> <title>jquery右下角弹窗效果</title> <script language="javascript"> $(function () { $.messager.show(0,'一个Jquery Messager消息弹出插件！'); $("#showMessager300x200").click(function(){ $.messager.lays(300, 200); $.messager.show(0, '300x200的消息',40000); }); $("#showMessagerFadeIn").click(function(){ $.messager.anim('fade', 2000); $.messager.show(0, 'fadeIn动画消息'); }); $("#showMessagerShow").click(function(){ $.messager.anim('show', 1000); $.messager.show(0, 'show动画消息'); }); $("#showMessagerDim").click(function(){ $.messager.show('<font color=red>自定义标题</font>', '<font color=green style="font-size:14px;font-weight:bold;">自定义内容</font>'); }); $("#showMessagerSec").click(function(){ $.messager.show(0, '一秒钟关闭消息', 1000); }); }); </script> </head> <body> <p><strong>JQUEYR PLUGIN - Messager </strong></p> <p><input type="button" id="showMessager300x200" value="显示一个300x200的消息" /></p> <p><input type="button" id="showMessagerFadeIn" value="显示一个fadeIn动画消息" /></p> <p><input type="button" id="showMessagerShow" value="显示一个show动画消息" /></p> <p><input type="button" id="showMessagerDim" value="显示定义内容和标题消息" /></p> <p><input type="button" id="showMessagerSec" value="一秒钟关闭消息" /></p> <br /><br /> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> </body> </html>
前台页面
需要用到的js文件
(function(){ var ua=navigator.userAgent.toLowerCase(); var is=(ua.match(/(chrome|opera|safari|msie|firefox)/) || ['','mozilla'])[1]; var r='(?:'+is+'|version)[\/: ]([\d.]+)'; var v=(ua.match(new RegExp(r)) ||[])[1]; jQuery.browser.is=is; jQuery.browser.ver=v; jQuery.browser[is]=true; })(); (function (jQuery){ /* * jQuery Plugin - Messager * Author: corrie Mail: corrie@sina.com Homepage: www.corrie.net.cn * Copyright (c) 2008 corrie.net.cn * @license http://www.gnu.org/licenses/gpl.html [GNU General Public License] * * $Date: 2008-12-26 * $Vesion: 1.4 @ how to use and example: Please Open demo.html */ this.version = '@1.3'; this.layer = {'width' : 200, 'height': 100}; this.title = '信息提示'; this.time = 4000; this.anims = {'type' : 'slide', 'speed' : 600}; this.timer1 = null; this.inits = function(title, text){ if($("#message").is("div")){ return; } var topHeight = document.documentElement.scrollTop + document.documentElement.clientHeight - this.layer.height-2; $(document.body).prepend('<div id="message" style="border:#b9c9ef 1px solid;z-index:100;'+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;100%;height:25px;font-size:12px;overflow:hidden;color:#1f336b;"><span id="message_close" style="float:right;padding:5px 0 5px 0;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;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;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;'+(this.layer.width-17)+'px;height:'+(this.layer.height-50)+'px;color:#1f336b;text-align:left;overflow:hidden;">'+text+'</div></div></div>'); $("#message_close").click(function(){ setTimeout('this.close()', 1); }); $("#message").hover(function(){ clearTimeout(timer1); timer1 = null; },function(){ timer1 = setTimeout('this.close()', time); }); }; this.show = function(title, text, time){ if($("#message").is("div")){ return; } if(title==0 || !title)title = this.title; this.inits(title, text); if(time>=0)this.time = time; switch(this.anims.type){ case 'slide':$("#message").slideDown(this.anims.speed);break; case 'fade':$("#message").fadeIn(this.anims.speed);break; case 'show':$("#message").show(this.anims.speed);break; default:$("#message").slideDown(this.anims.speed);break; } if($.browser.is=='chrome'){ setTimeout(function(){ $("#message").remove(); this.inits(title, text); $("#message").css("display","block"); },this.anims.speed-(this.anims.speed/5)); } //$("#message").slideDown('slow'); this.rmmessage(this.time); }; this.lays = function(width, height){ if($("#message").is("div")){ return; } if(width!=0 && width)this.layer.width = width; if(height!=0 && height)this.layer.height = height; } this.anim = function(type,speed){ if($("#message").is("div")){ return; } if(type!=0 && type)this.anims.type = type; if(speed!=0 && speed){ switch(speed){ case 'slow' : ;break; case 'fast' : this.anims.speed = 200; break; case 'normal' : this.anims.speed = 400; break; default: this.anims.speed = speed; } } } this.rmmessage = function(time){ if(time>0){ timer1 = setTimeout('this.close()', time); } }; this.close = function(){ switch(this.anims.type){ case 'slide':$("#message").slideUp(this.anims.speed);break; case 'fade':$("#message").fadeOut(this.anims.speed);break; case 'show':$("#message").hide(this.anims.speed);break; default:$("#message").slideUp(this.anims.speed);break; }; setTimeout('$("#message").remove();', this.anims.speed); this.original(); } this.original = function(){ this.layer = {'width' : 200, 'height': 100}; this.title = '信息提示'; this.time = 4000; this.anims = {'type' : 'slide', 'speed' : 600}; }; jQuery.messager = this; return jQuery; })(jQuery); $(window).scroll( function() { var topHeight = document.documentElement.scrollTop + document.documentElement.clientHeight - this.layer.height-2; $("#message").css("top",topHeight+"px"); });