我们在web页上操作数据时,常常需要在客户端弹出提示信息,常用的提示框是alert函数弹出的,现在我们做一个对用户友好一点的提示框,先发个图片看看效果:
![](https://images.cnblogs.com/cnblogs_com/lvlin/123.JPG)
该提示框可设置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
}
}
});
});
希望本文能对您有所帮助!
该提示框可设置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
}
}
});
});
希望本文能对您有所帮助!