jQuery右下角弹窗

最新推荐文章于 2017-11-08 12:46:00 发布

暗淡亮点

最新推荐文章于 2017-11-08 12:46:00 发布

阅读量382

点赞数

CC 4.0 BY-SA版权

分类专栏： javaScript

本文链接：https://blog.youkuaiyun.com/suleil1/article/details/49471033

javaScript 专栏收录该内容

46 篇文章

订阅专栏

下面是HTML代码

<!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" />
<title>MESSAGER插件</title>
<script src="../jquery-1.2.6.pack.js"></script>
<script src="jquery.messager.js"></script>
<script>
$(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);
});
});
</script>
<style type="text/css">

</style></head>

<body>
<h2>JQUEYR PLUGIN - Messager v1.3_1226版权所有 © <a href="http://www.corrie.net.cn" target="_blank">www.corrie.net.cn</a>赵戈</h2>
<p><b>版本1.4更新：</b><Br />1、支持鼠标over时不关闭消息提示框<br /><b>版本1.3更新：</b><br />
1、可以设置不自动关闭，停留在固定位置。<br />
2、增加了对UA的判断能力和效果解析<br />
3、针对chrome下的错位给予了一定的修补，目前效果还算可以<br />
4、针对代码段做了调整优化<br /></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>
<p class="new"><input type="button" id="showMessagerNoClose" value="不自动关闭消息" /></p>
</body>

</html>
下面是js代码

(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: Homepage: www.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;
   $(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>');

$("#message_close").click(function(){

setTimeout('this.close()', 1);

   });
   $("#message").hover(function(){
    clearTimeout(timer1);
    timer1 = null;
   },function(){
    timer1 = setTimeout('this.close()', time);
    //alert(timer1);
   });

};

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);

//setTimeout('$("#message").remove()', time+1000);

}

};
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;
$("#message").css("top",topHeight+"px");
});