//样式部分
.message {
position: fixed;top: -100px;width: 400px;left: 50%;margin-left: -200px;z-index: 1000;display: none;padding: 12px 0;text-align: center;color: #fff;background: #2196f3;
border-radius: 2px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;-webkit-transition: all 0.46s ease;
-moz-transition: all 0.46s ease;-o-transition: all 0.46s ease;transition: all 0.46s ease;
}
.messageShow {top: 6px;z-index: 2000;}
//Body部分
<div class="message"></div>
//JS部分
function messageShow() {
var w = $('.message');
w.addClass('messageShow');
}
function messageHide() {
var w = $('.message');
w.removeClass('messageShow').removeClass('messageShowNavFix');
w.html('');
}
function messageOut() {
var w = $('.message');
w.css('display', 'none');
}
var t1, t2, t3;
function message(str) {
var w = $('.message');
clearTimeout(t1);
clearTimeout(t2);
clearTimeout(t3);
w.html(str);
w.css('display', 'block');
t1 = setTimeout("messageShow()", 80);
t2 = setTimeout("messageHide()", 2500);
t3 = setTimeout("messageOut()", 3000);
}
//应用部分,如:
$('.btn').click(function(){
message("手机号不能为空,请输入手机号");
return;
});
继续阅读与本文标签相同的文章
上一篇 :
报告!这群阿里工程师在偷偷养猪
下一篇 :
案例篇-HBase 在人工智能场景的使用
-
请求支援!我被“非结构化数据包围了” | 开发者必读(060期)
2026-05-18栏目: 教程
-
研发效能提升 36 计第一课:互联网时代研发效能的挑战和应对之道
2026-05-18栏目: 教程
-
Service Mesh 发展趋势:云原生中流砥柱
2026-05-18栏目: 教程
-
深入理解 Java 中 SPI 机制
2026-05-18栏目: 教程
-
阿里云“网红"运维工程师白金:做一个平凡的圆梦人
2026-05-18栏目: 教程
