HTML代码

1
2
<div id="my_alert" class="alert" role="alert">
</div>

提前设置为隐藏

1
$("#my_alert").hide();

需要的时候调用

1
2
3
4
5
6
7
8
9
10
11
// 添加Alert样式
$("#my_alert").removeClass('alert-success alert-info alert-warning alert-danger').addClass('alert-danger');

// 添加内容
var innerHTML = "<strong>Success!</strong> Have a good time.";
$("#my_alert")[0].innerHTML = innerHTML;

// 出现2s后用slide方式0.5s消失
$("#my_alert").fadeTo(2000, 500).slideUp(500, function(){
    $("#my_alert").hide();
});

可以写成函数

1
2
3
4
5
6
7
8
9
10
function showToast(selector, style, innerHTML)
{
    selector.removeClass('alert-success alert-info alert-warning alert-danger');
    selector.addClass(style);

    selector[0].innerHTML = innerHTML;
    selector.fadeTo(2000, 500).slideUp(500, function(){
        selector.hide();
    });
}