jQuery 一句代码轻松实现 Toast 的提示框

ITPOW2017/2/21 13:11:47

如下代码，主要是 CSS，JS 只有一句。本效果是在手机中的效果。

<head>
<meta http-equiv="Content-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<style type="text/css">
#toast
{
  display:none;
  position:fixed;
  top:50%;
  left:50%;
  margin-top:-20px;
  margin-left:-75px;
  width:150px;
  height:40px;
  border-radius:10px;
  background:#353535;
  text-align:center;
  font-size:11px;
  line-height:40px;
  color:#fff;
}
</style>
</head>

<body>
<div id="toast"></div>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
<!--
$("#toast").text("操作成功");
$("#toast").fadeIn().delay(1000).fadeOut();
//-->
</script>
</body>

$("#toast").fadeIn().delay(1000).fadeOut();

也可实现在 fadeOut 后干点什么事情：

$("#toast").fadeIn().delay(1000).fadeOut("normal", function () {
    location.href = "ok.aspx";
});

<<返回首页<<