toast js

参考别人的，自己改写了下，很好用。
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <!-- <link href="styles/bootstrap/bootstrap.min.css" rel="stylesheet"> -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
      *{
        margin:0;padding:0;
      
        -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
        -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
        -webkit-tap-highlight-color: rgba(210,210,210,0.35); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
        -webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
      }
      body{
        font-family:"微软雅黑";
        font-size:12px;
      }
      ul,li{
        list-style:none;
      }
      
      .toast-content{
        z-index:1003;
        font-size: 1.37em;
        position: fixed;
        bottom:50%;
         100%;
        opacity:0;
        height: 24px;
        display: none;
        transition: opacity 1s ease-out;
      }
      .huati_btn{
        175px;

        height:32px;
        background:#34a0f0;
        border-radius:3px;
        font:14px/32px "微软雅黑";
        display:block;
        overflow:hidden;
        margin:0 auto;
        text-align:center;
        color:#fff;
        text-decoration:none;
      }
      .huati{height:40px;
        padding-top:9px;
        border-bottom:1px dashed #cecece
      }
    </style>
  </head>
  <body>
    <p class="huati"><a href="#" id='huati_btu' class="huati_btn">测试一下</a></p>
    <div id="toast-content" class="toast-content" style="display: none; opacity: 0;"></div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery/jquery-2.1.4.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap/bootstrap-3.3.5.min.js"></script>
    <script src="js/zepto/zepto.min.js"></script>
    <script>
      Zepto(function($){
        var toast_time = null;
        var display_time = null;

        function startToast(html){
          if(toast_time!=null){
            clearTimeout(toast_time);
            clearTimeout(dispaly_time);
          }

          $('#toast-content').css('display', 'block');
          $('#toast-content').css('opacity', 1);
          $('#toast-content').html(html);

          toast_time = setTimeout(function(){
            $('#toast-content').css('opacity', 0);
            display_time = setTimeout(function(){
              $('#toast-content').css('display', 0);
            }, 2000)
          }, 1000);
        }

        function test(){
          startToast('<div style="color:#fff;background: rgba(0, 0, 0, 0.6);border-radius: 2px;padding: 2px;text-align: center;175px;margin: 0 auto;">话题征集内容不能为空</div>');
        }

        test();
      })
      
    </script>
  </body>
</html>