原创，自己做的一个简单实用的提示小插件，兼容性很好，基本上都兼容！

实现的效果图如下：

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 = '<div id=' + obj_msgprint + ' class="tipsy tipsy-n" style="' + optionExtend.style_msgprint + '">
           <div class="tipsy-inner1" style="' + optionExtend.style_tipsyinner + '">
           <span class="tipsy-arrow1" style="' + optionExtend.style_tipsyarrow + '"></span>' + message + '</div>
          </div>';
    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代码调用如下：

<!DOCTYPE html>
<html>
<head>
    <title>提示 jquery.message.box Demo</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.message.box.js"></script>
    <link rel="stylesheet" type="text/css" href="tipsy.css" />
    <script>
        $(function () {
            //左侧 提示
            $("#btn").click(function () {
                $("#span1").messagebox("亲,请输入用户名!", "", 1000, 1, { style_tipsyinner: "padding:10px;width:120px;background:#336699" });
                $("#span2").messagebox("亲,请输入密码!", "", 1000, 1, { style_tipsyinner: "padding:10px;width:120px;background:#336699" });

            })
            //居下 提示
            $("#btn2").click(function () {
                $("#div1").messagebox("亲,请输入用户名!", "", 1000, 2, { style_tipsyinner: "width:180px;padding:14px;" });
                $("#div2").messagebox("亲,请输入密码!", "", 1000, 2, { style_tipsyinner: "width:180px;padding:14px;" });
            })
            //居中 提示 
            $("#btn3").click(function () {
                $("body").messagebox("亲,这里是居中显示!", "http://www.baidu.com", 500, 3, { style_msgprint: "width:200px;", style_tipsyinner: "padding:20px;background:#336699", style: "width:200px;" });
            })
        })
    </script>
</head>
<body>
    <div id="message">
    </div>

    <!--左侧提示-->
    <div style="height: 38px;">
        <input type="text" id="userName" style="width: 200px; height: 32px;" /><span id="span1"></span>
    </div>
    <br />
    <div style="height: 38px;">
        <input type="text" id="userName" style="width: 200px; height: 32px;" /><span id="span2"></span>
    </div>
    <br />
    <input type="button" value="左侧提示" id="btn" style="width: 120px; height: 42px; background: #005588;
        border: none; color: white;" />
    <br />
    <br />
    <!--左侧提示-->

    <!--下侧提示-->
    <div>
        <input type="text" style="width: 200px; height: 32px;" /><div id="div1">
        </div>
        </br>
        <input type="text" style="width: 200px; height: 32px;" /><div id="div2">
        </div>
    </div>
    <br />
    <br />
    <input type="button" value="向下提示" id="btn2" style="width: 120px; height: 42px; background: #336699;
        border: none; color: white;" />
    <!--下侧提示-->
    <br />
    <br />

    <!-----居中提示------->
    <input type="button" value="居中提示" id="btn3" style="width: 120px; height: 42px; background: #ff6600;
        border: none; color: white;" />
    <!-----居中提示------->
</body>
</html>

转载于:https://www.cnblogs.com/Kummy/archive/2013/05/02/3054274.html

原创，自己做的一个简单实用的提示小插件，兼容性很好，基本上都兼容！

Guess you like