toastr是一个基于Jquery的非阻塞的简单、漂亮的消息提示插件。核心简单，可以自定义和扩展。

效果示例

使用方法

1.引入toastrd css、js文件和jquery

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

2.使用方法示例

html代码

<input type="button" id="success" value="成功" />
<input type="button" id="info" value="提示" />
<input type="button" id="warning" value="警告" />
<input type="button" id="error" value="错误" />
<input type="button" id="clear" value="清除" />

js代码

$(function() {
    //自定义参数
    toastr.options = {  
            closeButton: false,  
            debug: false,  
            progressBar: true,  
            positionClass: "toast-top-right",  
            onclick: null,  
            showDuration: "300",  
            hideDuration: "1000",  
            timeOut: "2000",  
            extendedTimeOut: "1000",  
            showEasing: "swing",  
            hideEasing: "linear",  
            showMethod: "fadeIn",  
            hideMethod: "fadeOut"  
        }; 
    //成功提示绑定
    $("#success").click(function() {
        toastr.success("祝贺你成功了");
    })
    //信息提示绑定
    $("#info").click(function() {
        toastr.info("这是一个提示信息");
    })
    //敬告提示绑定
    $("#warning").click(function() {
        toastr.warning("警告你别来烦我了");
    })
    //错语提示绑定
    $("#error").click(function() {
        toastr.error("出现错误，请更改");
    })
    //清除窗口绑定
    $("#clear").click(function() {
        toastr.clear();
    })
});

配置参数说明： 

closeButton：false，是否显示关闭按钮（提示框右上角关闭按钮）； 

debug：false，是否为调试； 

progressBar：false，是否显示进度条（设置关闭的超时时间进度条）； 

positionClass，消息框在页面显示的位置

toast-top-left  顶端左边
toast-top-right    顶端右边
toast-top-center  顶端中间
toast-top-full-width 顶端，宽度铺满整个屏幕
toast-botton-right  
toast-bottom-left
toast-bottom-center
toast-bottom-full-width

onclick，点击消息框自定义事件 

showDuration: “300”，显示动作时间 

hideDuration: “1000”，隐藏动作时间 

timeOut: “2000”，自动关闭超时时间 

extendedTimeOut: “1000” 

showEasing: “swing”, 

hideEasing: “linear”, 

showMethod: “fadeIn” 显示的方式，和jquery相同 

hideMethod: “fadeOut” 隐藏的方式，和jquery相同

下载地址：

toastr-master.zip