jQuery弹出提示信息简洁版（自动消失）

标签：style   blog   http   io   color   ar   os   sp   div   

　　之前看了有一些现成的blockUI、Boxy、tipswindow等的jQuery弹出层插件，可是我的要求并不高，只需要在保存后弹出提示信息即可，至于复杂点的弹出层-可以编辑的，我是直接用bootstrap的model来实现的，因此我就自己做了一个简洁的可以用来弹出提示信息的功能。

　　首先在页面放一个提示span：<span id="tip"></span>。接下来给它设置一下样式：

　　提示信息样式

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

　　提示信息脚本

//tip是提示信息，type:‘success‘是成功信息，‘danger‘是失败信息,‘info‘是普通信息
function ShowTip(tip, type) {
    var $tip = $(‘#tip‘);
    $tip.attr(‘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样式来美化。

　　不过这样有个问题，如果文本太短觉得不好怎么办，那就给它#tip加个最小宽度：

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

　　至于为何不给ShowTip方法加个参数设置弹出信息的停留时间呢，那只是我不需要这个参数，直接写死也可以，这只是个人作风。还有个问题是ShowTip方法用起来还是有点不方便呀，那就再封装一下：

function ShowInfo(msg) {
    ShowTip(msg, ‘info‘);
}
function ShowSuccess(msg) {
    ShowTip(msg, ‘success‘);
}
function ShowFailure(msg) {
    ShowTip(msg, ‘danger‘);
}

　　这样在ajax返回信息需要提示的时候调用一下ShowSuccess或者ShowFailure方法就可以了。

　　本文示例代码

jQuery弹出提示信息简洁版（自动消失）

标签：style   blog   http   io   color   ar   os   sp   div   

原文地址：http://www.cnblogs.com/hambert/p/4076027.html