toastr插件实现alert做用户操作状态提示

在用户做了很多操作，比如注册、提交表单、删除等等，都需要做一个提示，这个提示还需要很快消失，使用toasts插件可以轻松实现这一点。

一个Demo如下，说明：

基于jQuery，所以要引入jQuery
下载toastr的js和css两个文件，并引入到文件中，点击这里到官网下载
之后就可以调用toastr.info('标题', '小标题')来展示alert了
在messageOpts中可以调节各类选项
如果需要页面居中显示，需要新建一个postionClass的类，即在toastr.min.css里添加一个样式，然后再messageOpts的positionClass填入toast-center-center就可以了。
```
.toast-center-center {
       top: 50%;
       left: 50%;
       margin-top: -30px;
       margin-left: -150px;
    }
```

以下是demo，选择你想要的部分复制到你自己文件里，就可以快速实现了。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="toastr.min.css" rel="stylesheet" type="text/css" />
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="toastr.min.js"></script>
</head>
<body>
    <button id="showtoast">show info toast（提示）</button>
    <br>
    <button id="showtoastsuccess">show success toast（成功）</button>
    <br>
    <button id="showtoasterror">show error toast（错误）</button>
    <br>
    <button id="showtoastwarning">show warning toast（警告）</button>
    <br>
    <button id="cleartoasts">clear toast（清除）</button>
    <br>
    <button id="removetoasts">remove toast（移除）</button>
    <br>
    <button onclick="toastr.info('内容')">remove toast（移除）</button>
    <br>

    <script type="text/javascript">
        $(function() {
            //设置显示配置
            var messageOpts = {
                "closeButton" : true,//是否显示关闭按钮
                "debug" : false,//是否使用debug模式
                "positionClass" : "toast-top-center",//弹出窗的位置
                "onclick" : null,
                "showDuration" : "300",//显示的动画时间
                "hideDuration" : "1000",//消失的动画时间
                "timeOut" : "2000",//展现时间
                "extendedTimeOut" : "1000",//加长展示时间
                "showEasing" : "swing",//显示时的动画缓冲方式
                "hideEasing" : "linear",//消失时的动画缓冲方式
                "showMethod" : "fadeIn",//显示时的动画方式
                "hideMethod" : "fadeOut" //消失时的动画方式
            };
            toastr.options = messageOpts;
    
            $('#showtoast').click(function() {
    
                //提示
                //调用方法1
                toastr.info('内容1');
    
                //调用方法2
                //toastr.info('内容2', '标题2');
    
                //调用方法3
                //toastr['info']('内容3', '标题3');
    
                //调用方法4
                //toastr.info('内容4', '标题4',messageOpts);
    
            });
    
            $('#showtoastsuccess').click(function() {
    
                //成功
                toastr.success('内容success', '标题success');
    
            });
    
            $('#showtoasterror').click(function() {
    
                //错误
                toastr.error('内容error', '标题error');
    
            });
    
            $('#showtoastwarning').click(function() {
    
                //警告
                toastr.warning('内容warning', '标题warning');
            });
    
            $('#cleartoasts').click(function() {
    
                //清除
                toastr.clear();
            });
    
            $('#removetoasts').click(function() {
    
                //移除
                toastr.remove();
            });
    
        })
    </script>
</body>
</html>