使用HTML/CSS/JavaScript显示Android风格的toast通知

通常，当您想让用户知道某件事时，您会使用警报

现在，我想这样做，但以Android toast的方式，即屏幕上出现一个弹出窗口，但几秒钟后自动消失，因此用户不必费心关闭它，如下图所示

这样的事情怎么可能在网络上实现呢？
注意：做一个触摸界面，所以这就是我想用这种方式的原因

---

更简单的方法是在你放信息的地方做一个支架。那个持有者将被隐藏

<div class='error' style='display:none'>Event Created</div>

然后用一个简单的脚本，你可以显示几秒钟。必要时使用

.stop（）

$('.error').fadeIn(400).delay(3000).fadeOut(400); //fade out after 3 seconds

$（“按钮”）。单击（函数（）{
$（'.error'）.text（$（this.data（'text'））.fadeIn（400）、delay（3000）、fadeOut（400）；
});
body，html{
身高：100%；
宽度：100%；
最小高度：100%；
填充：0；
保证金：0；
}
.错误{
宽度：200px；
高度：20px；
高度：自动；
位置：绝对位置；
左：50%；
左边距：-100px；
底部：10px；
背景色：#3838；
颜色：#f0；
字体系列：Calibri；
字体大小：20px；
填充：10px；
文本对齐：居中；
边界半径：2px；
-网络工具包盒阴影：0px 0px 24px-1px rgba（56,56,56,1）；
-moz盒阴影：0px 0px 24px-1px rgba（56,56,56,1）；
盒子阴影：0px 0px 24px-1px rgba（56,56,56,1）；
}

做点什么您在internet上有一些很好的库来模仿本机android toast消息：



（Javascript）
（jQuery）
（jquerymobile）

基本上是一个
div
，带有一些CSS消息和一个要显示和隐藏的动画。
这里有一个库，它从android toast中借用了很多东西，并将其简化为类似的东西

它显示一个带有一些消息的
div
。

如果你想要这样的通知。那么代码和说明就在这里（对不起，koding.com:）

HTML端（添加正文末尾）

JS端（当然使用jquery库）

用例

if(success){
  notify("Success message",1);
} else {
  notify("Error message",0);
}

下面是一个简单的CSS和Javascript解决方案。（使用Jquery，但不需要）


$（“#单击我”）。单击（函数（）{
$（“body”）.append（“helloworld！”）；
setTimeout（函数（）{
$（“.toast”）.remove（）；
},3000);
}); 
.toast{
位置：固定；
显示：块；
底部：2米；
高度：2米；
宽度：10em；
左：钙（50%-5em）；
动画：土司淡入1秒2交替；
背景色：黑色；
边界半径：2米；
颜色：白色；
文本对齐：居中；
填充：1em；
线高：2米；
不透明度：0；
}
@关键帧淡入{
从{
不透明度：0；
}
到{
不透明度：1；
}
}
我建议您使用这个轻巧而简单的库，它与android toast的外观和感觉完全匹配&它的大小只有1KB


$（“#我的按钮”）。单击（（）=>{ToastMaker（“这是一个祝酒通知！”）}）

Show Toast
谢谢你的回复，我会仔细考虑，但最好是自己做一个，因为你说这并不像我想的那么难。：）入门很简单-只需从GitHub复制/包含2个文件，然后一行显示toast。ThanksA jQuery toastmessage插件就可以了。这里是Spokey代码的分叉版本，它将创建div内联，因此不需要对dom进行任何更改：hi@Spokey。。我在chrome上试过这个，它给出了一个错误“uncaughttypeerror:myDiv.stop不是一个函数”，没有“stop（）”，它对多个clicksHey@SurajS都是一样的，你能用fiddle？来展示一个例子吗。stop（）将仅停止动画，并在触发时从开始重新运行动画。我想你可能正在寻找一种方法来禁用该操作？对不起。。这是sytax的问题。。我才知道它什么时候开始对所有函数都给出相同的错误。。谢谢你的回答：）完全正确。令人惊叹的。
<div id="notification" class="kdnotification main">
  <div class="kdnotification-title"></div>
</div>

.kdnotification{display:none}
.kdnotification a{text-shadow:0 1px 0 #444}
.kdnotification{position:fixed;padding:10px;z-index:20001;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}
.kdnotification .kdnotification-title{color:#fff;font-size:24px;line-height:36px;margin:2px;font-weight:700}
.kdnotification .kdnotification-content{font-size:16px;line-height:18px;color:#fff}
.kdnotification .kdnotification-timer{position:absolute;top:21px;right:25px;color:#fff;line-height:15px;text-align:center;font-size:15px;width:20px;height:24px}
.kdnotification a{position:absolute;cursor:pointer;display:block;top:24px;right:5px;line-height:24px;text-align:center;font-size:24px;text-decoration:none;color:#fff;width:20px;height:24px}
.kdnotification-title{font-size:18px;line-height:28px;float:none}
.kdnotification-title{font-size:12px;line-height:16px;font-weight:400;float:none}
.kdnotification.mini{-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;padding:1px;-webkit-box-shadow:0 0 1px 1px rgba(255,255,255,.1),inset 0 0 2px #000;-moz-box-shadow:0 0 1px 1px rgba(255,255,255,.1),inset 0 0 2px #000;box-shadow:0 0 1px 1px rgba(255,255,255,.1),inset 0 0 2px #000}
.kdnotification-title{font-size:12px;line-height:16px;font-weight:400;float:none;padding:2px 10px}
.kdnotification.mini .kdnotification-title p{padding:0 10px}
.kdnotification.mini.error{background:rgba(185,74,72,.9);font-weight:600}
.kdnotification.mini.success{background:rgba(70,136,71,.8);font-weight:600}

function notify(message,status){
  $('.kdnotification-title').html(message);
  funcking();
  if(status == 1){
    $('#notification').css({'background-color':'rgba(0,0,0,.4)'}).fadeIn('slow').delay(5000).fadeOut('slow');
  } else {
    $('#notification').css({'background-color':'rgba(216,0,12,.6)'}).fadeIn('slow').delay(3000).fadeOut('slow');
  }
}

function funcking(){
    var kd=$('.kdnotification');
    var viewportHeight = $(window).height(),
        viewportWidth = $(window).width(),
        kdheight = kd.height(),kdwidth = kd.width(),
        hdiff = viewportHeight - kdheight,
        vdiff = viewportWidth - kdwidth,
        left= vdiff/2,
        top = hdiff/2;
    kd.css({'top':top+'px','left':left+'px'});
}

if(success){
  notify("Success message",1);
} else {
  notify("Error message",0);
}