jQuery彈出提示信息簡潔版（自動消失）

　　以前看了有一些現成的blockUI、Boxy、tipswindow等的jQuery彈出層插件，但是個人要求並不高，只須要在保存後彈出提示信息便可，至於複雜點的彈出層-能夠編輯的，我是直接用bootstrap的modal來實現的，所以我就本身作了一個簡潔的能夠用來彈出提示信息的功能。

　　首先在頁面放一個提示strong：<strong id="tip"></strong>。接下來給它設置一下樣式：

　　提示信息樣式

#tip {
    position: absolute;
    top: 50px;
    left: 50%;
    display: none;
    z-index: 9999;
}

　　提示信息腳本

//tip是提示信息，type:'success'是成功信息，'danger'是失敗信息,'info'是普通訊息,'warning'是警告信息
function showTip(tip, type) {
    var $tip = $('#tip');
    $tip.stop(true).prop('class', 'alert alert-' + type).text(tip).css('margin-left', - $tip.outerWidth() / 2).fadeIn(500).delay(2000).fadeOut(500);
}

 

　　這樣子，簡單的jQuery彈出提示信息就完成了。話說上面的東西作了什麼呢，其實就是彈出一個提示信息，該信息位置在網頁top50px，left50%，而後再用margin-left左移信息的一半寬度，以此實現左右居中，半秒fadeIn顯示，2秒停留，而後半秒fadeOut消失。除此以外呢其實我還給彈出信息美化了一下，就是用了bootstrap的alert alert-success alert-danger alert-info樣 alert-warning式來美化。還有爲何要用stop(true)呢，主要是由於連續彈出多個提示框的時候，個人作法是讓以前的提示框直接結束全部運動，w3c一看，$(selector).stop(stopAll,goToEnd)，stopAll就是中止未完成的全部運動。

　　不過這樣有個問題，若是文本過短以爲很差怎麼辦，那就給它#tip加個最小寬度：

min-width: 200px;
text-align: center;

　　至於爲什麼不給showTip方法加個參數設置彈出信息的停留時間呢，那只是我不須要這個參數，直接寫死也能夠，這只是我的做風。還有個問題是showTip方法用起來仍是有點不方便呀，那就再封裝一下：

function ShowMsg(msg) {
    ShowTip(msg, 'info');
}

function ShowSuccess(msg) {
    ShowTip(msg, 'success');
}

function ShowFailure(msg) {
    ShowTip(msg, 'danger');
}

function ShowWarn(msg, $focus, clear) {
    ShowTip(msg, 'warning');
    if ($focus) {
　　　　 $focus.focus();
    　　if (clear) $focus.val('');
　 　}
    return false;
}

 

　　這樣在ajax返回信息須要提示的時候調用一下ShowSuccess或者ShowFailure方法就能夠了。你可能會有疑問ShowWarn怎麼長的不同，是幹嗎子的呢，主要是由於在表單提交的時候須要進行驗證，客戶端驗證的時候就調用這個方法，用法例如：

加兩個參數$focus和clear主要是爲了方便使用。。。

　　另外若網頁有iframe內聯框架，若該iframe裏也想讓頂級窗口彈出提示信息，則得改一下showTip方法：

//tip是提示信息，type:'success'是成功信息，'danger'是失敗信息,'info'是普通訊息,'warning'是警告信息
function showTip(tip, type) {
　　var $tip = $('#tip', top.document); 
　　$tip.stop(true).prop('class', 'alert alert-' + type).text(tip).css('margin-left', - $tip.outerWidth() / 2).fadeIn(500).delay(2000).fadeOut(500);
}

 

　　若是不想樣式和span以及腳本太分散，能夠把他們整合成一個js插件：

//tip是提示信息，type:'success'是成功信息，'danger'是失敗信息,'info'是普通訊息,'warning'是警告信息
function ShowTip(tip, type) {
    var $tip = $('#tip');
    if ($tip.length == 0) {
        $tip = $('<strong id="tip" style="position:absolute;top:50px;left: 50%;z-index:9999"></strong>');
        $('body').append($tip);
    }
    $tip.stop(true).prop('class', 'alert alert-' + type).text(tip).css('margin-left', -$tip.outerWidth() / 2).fadeIn(500).delay(2000).fadeOut(500);
}

function ShowMsg(msg) {
    ShowTip(msg, 'info');
}

function ShowSuccess(msg) {
    ShowTip(msg, 'success');
}

function ShowFailure(msg) {
    ShowTip(msg, 'danger');
}

function ShowWarn(msg, $focus, clear) {
    ShowTip(msg, 'warning');
    if ($focus) {
　　　　 $focus.focus();
    　　if (clear) $focus.val('');
　　 }
    return false;
}

 

　　親自試一試