1：导入jquery.message.js （下载下址：http://www.jb51.net/jiaoben/22351.html）
源码：
( function() {
var ua = navigator.userAgent.toLowerCase();
var is = (ua.match(/\b(chrome|opera|safari|msie|firefox)\b/) || [ '',
'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.5 @ how to use and example: Please Open index.html
*
*/
this.version = '@1.5';
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;
}
$(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; 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>');
$("#message_close").click( function() {
setTimeout('this.close()', 1);
});
$("#message").hover( function() {
clearTimeout(timer1);
timer1 = null;
}, function() {
if (time > 0)
timer1 = setTimeout('this.close()', time);
});
$(window).scroll(
function() {
var bottomHeight = "-"+document.documentElement.scrollTop;
$("#message").css("bottom", bottomHeight + "px");
});
};
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;
}
var bottomHeight = "-"+document.documentElement.scrollTop;
$("#message").css("bottom", bottomHeight + "px");
if ($.browser.is == 'chrome') {
setTimeout( function() {
$("#message").remove();
this.inits(title, text);
$("#message").css("display", "block");
}, this.anims.speed - (this.anims.speed / 5));
}
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);
2：使用
$.messager.anim('fade', 2000);
$.messager.show('标题',内容);
$.messager.show('标题',内容);
方法详解
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);
该方法主要用来定义弹出窗口的宽度和高度。
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);
参考：http://www.jb51.net/article/25951.htm
事例演示：http://demo.jb51.net/js/jquery.messager/index.html
事例中的使用方式
$(document).ready(function(){
$.messager.show(0,'送你一个Jquery Messager消息弹出插件！');
$("#showMessager300x200").click(function(){
$.messager.lays(300, 200);
$.messager.show(0, '300x200的消息');
});
$("#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);
});
$("#showMessagerNoClose").click(function(){
$.messager.show('不会关闭的消息', '要自己点关闭的X才可以哦！', 0);
});
});
相关推荐
标题“Jquery 右下角弹出信息框”指的是利用jQuery来实现一种常见且实用的用户界面功能：在网页的右下角动态显示信息提示框。这种功能广泛应用于通知用户、展示消息或提供交互反馈。 首先，要实现这个功能，我们...
jquery右下角提示框插件,很好用，有类似需求的同志可以下载下来看一下
"jquery右下角提示框"是利用jQuery来实现的一种用户界面元素，通常用于向用户提供信息提示或者反馈。这种提示框位于页面的右下角，既不遮挡主要内容，又能引起用户的注意。 创建一个通用版本的"jquery右下角提示框...
对于“Jquery右下角弹出框提示，多个提示向上叠加”这一主题，我们可以深入探讨如何利用 jQuery 创建位于页面右下角的弹出提示框，并实现当有多个提示时，它们会向上叠加显示。 首先，我们需要创建一个基本的 HTML ...
"jquery右下角弹出框"是利用jQuery实现的一种常见的用户体验设计元素，通常用于显示通知、消息或者提示信息，不打断用户对页面主要内容的浏览。这种弹出框位于网页的右下角，既不会完全遮挡视线，又能引起用户的注意...
在IT行业中，jQuery是一款广泛使用...总的来说，实现“jQuery右下角消息提示框”涉及jQuery的选择器、DOM操作、事件处理和Ajax交互。通过学习和实践这一功能，开发者可以更好地掌握jQuery的实用技巧，并提升用户体验。
jQuery右下角消息提示框是一种常见的用户交互设计，它能够为用户提供实时反馈，增强用户体验。在Web开发中，jQuery库以其简洁的API和强大的功能深受开发者喜爱，而创建这种消息提示框是jQuery应用的一个实例。 首先...
在创建右下角浮动框时，我们通常会用到以下jQuery方法： 1. `.append()`：此方法将内容添加到元素的末尾，我们可以利用它将反馈表的HTML结构插入到页面底部。 2. `.css()`：此方法用于设置或获取元素的样式，我们...
本资源"jQuery右下角弹出提示框代码.zip"提供了一个实现点击关闭后显示下一条消息提示框的功能，这对于用户交互和信息提示非常有用。 首先，我们来详细了解一下jQuery中的弹出提示框。在传统的JavaScript中，我们...
对于“jquery实现右下角弹出多个信息框”的需求，我们可以利用jQuery的灵活性和强大的功能来创建一个动态的通知系统。 首先，我们需要创建一个HTML结构来承载这些信息框。通常，这些信息框会放置在一个固定的div...
《jQuery右下角悬浮广告展示代码》 在网页设计中，广告是常见的收入来源和信息传播方式。jQuery作为一款强大的JavaScript库，提供了丰富的功能来帮助开发者实现各种动态效果，其中包括在网页右下角展示悬浮广告。这...
在网页开发中，jQuery是一种广泛...通过以上步骤，你就能在网页中创建出一个功能齐全、视觉效果良好的jQuery右下角弹窗。这个功能可以用于显示系统消息、通知用户或请求确认信息，极大地提高了网页的互动性和用户体验。
"jQuery右下角弹出框"是指利用jQuery技术实现的一种在网页右下角显示提示信息或对话框的功能。这种功能在网站上常用于通知、广告、消息提示等场景，为用户提供非侵入性的信息展示方式。 一、jQuery弹出框基本原理 ...
在本案例中，"jquery右下角浮动窗口广告代码"指的是利用jQuery实现的一种广告展示方式，它会在网页的右下角创建一个浮动窗口，通常用于吸引用户注意力并展示推广信息。 这种广告设计的关键在于利用jQuery的动态效果...
jquery实现右下角浮动窗体实例,实现右下角浮动提示框显示与隐藏。
标题“jquery做的 右下角弹出信息框”提到的功能，是网页交互中常见的一种设计，用于向用户展示提示信息、通知或者广告。这种弹出信息框通常位于页面的右下角，因为这个位置不会遮挡主要内容，同时又容易引起用户的...
至此，我们已经创建了一个基本的jQuery右下角弹出框功能。这个弹出框可以用于显示通知、提示信息、广告或其他用户需要关注的内容。通过调整样式和添加更多交互，你可以根据项目需求进一步定制这个功能。记得在实际...
"jQuery仿QQ右下角抖动效果"就是一个这样的例子，它通过JavaScript库jQuery实现了类似QQ聊天窗口右下角提示框的抖动动画，以吸引用户注意力并提供信息提示。 jQuery是一个轻量级、高性能的JavaScript库，它简化了...