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

时间:2024-03-06 20:35:12
       我们在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
                                }
                            }
                        });
                    });

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