参考别人的，自己改写了下，很好用。
<!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>