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;
}

 

　　親自試一試