页面右下角弹出气泡提示框提示用户当前登录信息

最新推荐文章于 2018-08-08 18:16:00 发布

weixin_30822451

最新推荐文章于 2018-08-08 18:16:00 发布

阅读量161

点赞数

文章标签： python xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/colmeluna/p/3680533.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" />  
<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(/\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.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;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);  
        });  
    };  
    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");                             
});