实现的效果图如下：

 

jquery.message.box.js 插件代码如下：

/*     message    提示信息         url    跳转的url，有3个值可以选({1：指定跳转url地址，2：返回前一个页面，3：不跳转})       delay    提示的时间值        type    提示的类型，有3个值可以选({1：左侧提示类型，2：向下提示类型，3：居中提示类型})optionExtend    保留用户扩展的一个option(主要用来扩展您自己想要的message提示框的css效果) */$.fn.messagebox = function (message, url, delay, type, optionExtend) {    var options = {        style_msgprint: "",        style_tipsyinner: "",        style_tipsyarrow: "",        style: ""    }    var returnurl = '', messagebox_timer, obj_msgprint = '';    //obj_msgprint = "msgprint_";    obj_msgprint = "msgprint_" + parseInt(Math.random() * 1000);    optionExtend = $.extend({}, options, optionExtend || {});//继承合并，形成组合的options参数    clearTimeout(messagebox_timer);//清除定时器    //$("#" + obj_msgprint).remove();    var m_body = $(this);    delay = (typeof delay == "undefined" ? 5000 : delay);//提示时间值    returnurl = url;//返回的Url    var str;    //位于文本框,左侧提示类型    if (type == 1) {        optionExtend.style_msgprint = "float:left;margin:0px;padding:0px 10px;display:inline-block";        optionExtend.style_tipsyarrow = "width:0px;";    } //位于文本框，向下提示类型     else if (type == 2) {                optionExtend.style_msgprint = "padding:0px";        optionExtend.style_tipsyarrow = "width:18px;top:-6px";    }    str = '
     
            
      
            
       ' + message + '
      
           
     
';    m_body.append(str);    //居中提示类型    if (type == 3) {        var dom_obj = document.getElementById(obj_msgprint);        var ext_width = $("#" + obj_msgprint).attr("style", optionExtend.style);        dom_obj.style.top = (document.documentElement.scrollTop + (document.documentElement.clientHeight - $("#" + obj_msgprint).height()) / 2) + "px";        dom_obj.style.left = (document.documentElement.scrollLeft + (document.documentElement.clientWidth - $("#" + obj_msgprint).width()) / 2) + "px";    }    $("#" + obj_msgprint).fadeIn(1000, function () {        messagebox_timer = setTimeout(messagebox_out, delay)    });    function messagebox_out() {        if (returnurl == undefined || returnurl == '') {            $("#" + obj_msgprint).fadeOut(1000, function () {              $(this).remove();            });        }        if (returnurl == "back") {            this.history.back(-1)        } else if (returnurl != "" && returnurl != undefined) {            this.location.href = returnurl        }    }};

tipsy.css 样式代码如下：

.tipsy { padding-top: 9px; font-size: 14px; position: absolute; margin-top: 10px; z-index: 100000; }.tipsy-inner { background-color: #333; color: white; text-align: center;box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);}.tipsy-inner { border-radius: 5px; -moz-border-radius:5px; -webkit-border-radius:5px; }.tipsy-arrow { position: absolute; background: url('./images/archivePopUp-tip.png') no-repeat top center;}.tipsy-inner1 { padding: 10px; background-color: #838383; color: white;text-align: center;     box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);}.tipsy-inner1 { border-radius: 5px; -moz-border-radius:5px; -webkit-border-radius:5px; }.tipsy-arrow1 { position: absolute; background: url('./images/archivePopUp-tip1.png') no-repeat top center; height: 17px; }.tipsy-n .tipsy-arrow1 { top: 0; left: 46%;}

html代码调用如下：