message() 信息提示

//樣式部分css

.message {html

    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;});
相關文章
相關標籤/搜索