jQuery toast 淡入淡出提示
Posted lisashare
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery toast 淡入淡出提示相关的知识,希望对你有一定的参考价值。
#toast{
position: fixed;
top: 44%;left:50%;transform: translateX(-50%);
min-width: 80px;
max-width: 180px;
min-height: 18px;
padding: 10px;
line-height: 18px;
text-align: center;
font-size: 16px;
color: #fff;
background: rgba(0, 0, 0, 0.6);
border-radius: 5px;
display: none;
z-index: 999;
}
/* toast 提示
$("#toast").showMessage('网络错误,请稍后重试',1400);
*/
$.fn.extend({
showMessage: function( $msg, $time ){
var oDiv = document.createElement("div");
oDiv.setAttribute("id", "toast");
var oBody = document.getElementsByTagName('body')[0];
oBody.append(oDiv);
$('#toast').text( $msg );
$('#toast').fadeIn();
setTimeout(function() {
$('#toast').fadeOut();
}, $time);
}
});
以上是关于jQuery toast 淡入淡出提示的主要内容,如果未能解决你的问题,请参考以下文章
如何在Twitter Bootstrap工具提示上启用淡入淡出效果?
bootstrap中表格修饰图片浮动背景框提示框及关闭提示框元素淡入淡出及jQuery中操作类名