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

 

　　亲自试一试