简单的Web页⾯提⽰框（html+jQuery）我们在web页上操作数据时，常常需要在客户端弹出提⽰信息，常⽤的提⽰框是alert函数弹出的，现在我们做⼀个对⽤户友好⼀点的提⽰框，先发个图⽚看看效果：
该提⽰框可设置4个属性：
1背景颜⾊;
2提⽰内容；
3显⽰多长时间：
4关闭后执⾏的函数：
代码如下：
/
/mymon.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、在页⾯中加⼊对mymon.js⽂件的引⽤
3、在需要调⽤的时候写代码如下：
a：简单调⽤
showMsg("请输⼊查询关键字！", "alert", 2000);
b：复杂⼀点的调⽤：
showMsg("新增票据类型成功！","success", 3000, function(){                        $.ajax({jquery弹出div窗口
type: "POST",
url: "/BillWeb/BillType/BillTypeList",
data:"accountBookID=" + accBookID,
dataType: "html",
success:function(res){
if(res.length > 0){
//todo  something
}
}
});
});
希望本⽂能对您有所帮助！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。