JQuery定时自动消失提示框/弹出框
在表单提交中,不论成功与否,好的体验都应该有弹出提示,效果:
在页面中央显示提示,1.5秒后消失,不影响页面的正常布局。
1HTML代码
HTML代码显示提示内容,放在页面中任何位置。
<div></div>
2CSS代码
弹出框参考了 Bootstrap的样式:
.alert{ display:none; position:fixed; top:50%; left:50%; min-width:300px; max-width:600px; transform:translate(-50%,-50%); z-index:99999; text-align:center; padding:15px; border-radius:3px; } .alert-success{ color:#3c763d; background-color:#dff0d8; border-color:#d6e9c6; } .alert-info{ color:#31708f; background-color:#d9edf7; border-color:#bce8f1; } .alert-warning{ color:#8a6d3b; background-color:#fcf8e3; border-color:#faebcc; } .alert-danger{ color:#a94442; background-color:#f2dede; border-color:#ebccd1; }
3Javascript代码
首先,加载JQuery,然后用下面代码实现1.5秒后淡出效果:
$('.alert').html('操作成功').addClass('alert-success').show().delay(1500).fadeOut();
如果不想在HTML中加DIV,可以直接用JS把DIV添加到页面中,如下:
$('<div>').appendTo('body').addClass('alertalert-success').html('操作成功').show().delay(1500).fadeOut();
一般情况下,如果这个方式使用得很频繁,写成函数可以提高复用:
/** *弹出式提示框,默认1.2秒自动消失 *@parammessage提示信息 *@paramstyle提示样式,有alert-success、alert-danger、alert-warning、alert-info *@paramtime消失时间 */ varprompt=function(message,style,time) { style=(style===undefined)?'alert-success':style; time=(time===undefined)?1200:time; $('<div>') .appendTo('body') .addClass('alert'+style) .html(message) .show() .delay(time) .fadeOut(); }; //成功提示 varsuccess_prompt=function(message,time) { prompt(message,'alert-success',time); }; //失败提示 varfail_prompt=function(message,time) { prompt(message,'alert-danger',time); }; //提醒 varwarning_prompt=function(message,time) { prompt(message,'alert-warning',time); }; //信息提示 varinfo_prompt=function(message,time) { prompt(message,'alert-info',time); };
这样比用setTimeout()结构更清晰。