toastr是一个基于Jquery简单、漂亮的消息提示插件，使用简单、方便，可以根据设置的超时时间自动消失。

首先引入JS和css样式表。

<script src="toastr.min.js"></script>
<link rel="stylesheet" href="toastr.min.css">

其次JS引入运行参数

toastr.options = {  
        closeButton: false,  
        debug: false,  
        progressBar: true,  
        positionClass: "toast-bottom-center",  
        onclick: null,  
        showDuration: "300",  
        hideDuration: "1000",  
        timeOut: "2000",  
        extendedTimeOut: "1000",  
        showEasing: "swing",  
        hideEasing: "linear",  
        showMethod: "fadeIn",  
        hideMethod: "fadeOut"  
    };  
最后在页面中集中使用提示：

//常规消息提示，默认背景为浅蓝色  
toastr.info("你有新消息了!");  
//成功消息提示，默认背景为浅绿色 
toastr.success("你有新消息了!");  
//警告消息提示，默认背景为橘黄色 
toastr.warning("你有新消息了!");  
//错误消息提示，默认背景为浅红色 
toastr.error("你有新消息了!");  
//带标题的消息框
toastr.success("你有新消息了!","消息提示");  
//另一种调用方法
toastr["info"]("你有新消息了!","消息提示");

查看最终效果：

json POST实例：

$("form").submit(function(){
    var self = $(this);
    $.post
(self.attr("action"), self.serialize(), success, "json");
    return false;
    function success(data){
       if(data.status){
toastr.success(data.info,"登录成功了！~");  
    setTimeout(function(){window.location.href = data.url;},3000);
    } else {
toastr.error(data.info,"登录失败了！~");  
    $(".img-responsive").click();
    }
    }
    });