简单的Web页面提示框(html + jQuery) - 吕霖

       我们在web页上操作数据时，常常需要在客户端弹出提示信息，常用的提示框是alert函数弹出的，现在我们做一个对用户友好一点的提示框，先发个图片看看效果：


该提示框可设置4个属性：
1背景颜色;
2提示内容；
3显示多长时间：
4关闭后执行的函数：
代码如下：
//my.common.js
//客户端居中弹出层提示
//msg 提示内容，type 是框的不同背景色，time 是显示多长时间，默认1.5秒，fn是函数名称，如果不需要可以传入null
//\'/BillWeb/Content/Images/close.gif\'  这个是图片，可以自己指定
function showMsg(msg, type, time, fn){
    $("<div id=\'divMsg\'></div>").appendTo("body");
    $("#divMsg").css("background-color",getColor(type))
    .html("<img id=\'imgID\' src=\'/BillWeb/Content/Images/close.gif\' alt=\'关闭\' style=\'position:absolute; top:2px; right:2px; cursor:pointer \'/>" + msg )
    if(time == null || time == undefined){
        time = 1500;
    }
    $("#imgID").click(function(){
        $("#divMsg").fadeOut("fast", function(){
            $("#divMsg").remove();
            if (fn != null) fn();
        })
    })
    //此处按照需求更改，如果成功则不提示任何信息
    $("#divMsg").fadeIn("fast", function(){
        window.setTimeout(function(){
           $("#divMsg").fadeOut("fast", function(){
               $("#divMsg").remove();
               if (fn != null) fn();
           })
        }, time);
    });
}
//此函数根据传入的不同type，返回不同的背景颜色
function getColor(type){
    var strColor = "#d6ed9c";
    switch (type){
        case "alert":
            strColor = "#f3e9a9";
            break;
        case "success":
            strColor = "#d6ed9c";
            break;
        case "failed":
            strColor = "#f3e9a9";
            break;
        case "wait":
            strColor = "#d6ed9c";
            break;
    }
    return strColor;
}
使用方法：
1、首先在页面中加载jQuery1.3.2.js文件
2、在页面中加入对my.common.js文件的引用
3、在需要调用的时候写代码如下：
a：简单调用
      showMsg("请输入查询关键字！", "alert", 2000);
b：复杂一点的调用：
                    showMsg("新增票据类型成功！","success", 3000, function(){
                        $.ajax({
                            type: "POST",
                            url: "/BillWeb/BillType/BillTypeList",
                            data:"accountBookID=" + accBookID,
                            dataType: "html",
                            success:function(res){
                                if(res.length > 0){
                                    //todo  something
                                }
                            }
                        });
                    });

      希望本文能对您有所帮助！